/* ==========================================================================
   Secciones, en el mismo orden del sitio actual
   ========================================================================== */

/* Lema ------------------------------------------------------------------- */

.lema {
  display: grid;
  overflow: hidden;
  margin-top: clamp(14px, 1.6vw, 24px);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}

.lema__media { min-height: clamp(220px, 58vw, 340px); }

.lema__texto {
  display: flex;
  align-items: center;
  padding: clamp(20px, 3vw, 56px);
}

.lema__titulo {
  font-size: var(--t-h1);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.04em;
  word-spacing: 0.08em;
}

.lema__titulo span { display: block; }

/* Segunda línea en petróleo: asocia el titular a la marca con contraste AA */
.lema__titulo .lema__linea2 { margin-top: 0.08em; color: var(--petroleo); }

@media (min-width: 760px) {
  .lema { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .lema__media { min-height: clamp(300px, 34vh, 460px); }
}

/* Cotizador: cabecera ------------------------------------------------------ */

.cotiza { padding-top: clamp(2.5rem, 1.8rem + 3vw, 5rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* Galería ------------------------------------------------------------------ */

.galeria { position: relative; padding-bottom: var(--seccion); }

.galeria__grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 22px);
}

.galeria__foto { border-radius: var(--radio-m); box-shadow: var(--sombra-elevada); }
.galeria__foto--centro { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 3 / 2; }
.galeria__foto--izq { aspect-ratio: 1; transform: rotate(-1.4deg); }
.galeria__foto--der { aspect-ratio: 1; transform: rotate(1.4deg); }

.galeria__pausa {
  position: absolute;
  z-index: 3;
  right: calc(var(--gutter) + 12px);
  bottom: calc(var(--seccion) + 14px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--petroleo-profundo);
  box-shadow: var(--sombra);
}

@media (min-width: 760px) {
  .galeria__grilla {
    grid-template-columns: 1fr 1.42fr 1fr;
    align-items: center;
  }

  .galeria__foto--izq,
  .galeria__foto--der { aspect-ratio: 5 / 4; z-index: 1; }
  .galeria__foto--centro { grid-column: 2; aspect-ratio: 4 / 3; z-index: 2; }
  .galeria__foto--izq { grid-column: 1; grid-row: 1; transform: rotate(-2deg) translateX(14px); }
  .galeria__foto--der { grid-column: 3; grid-row: 1; transform: rotate(2deg) translateX(-14px); }
}

/* Servicios ---------------------------------------------------------------- */

.servicios { background: var(--superficie); border-radius: var(--radio-seccion); }

.servicios__intro p {
  max-width: 34em;
  margin-top: 16px;
  color: var(--texto-secundario);
}

.tinte-petroleo { --tinte: var(--petroleo-claro); --tinte-borde: var(--petroleo-suave); }
.tinte-celeste { --tinte: var(--celeste-claro); --tinte-borde: var(--celeste-suave); }
.tinte-lima { --tinte: var(--lima-claro); --tinte-borde: var(--lima-suave); }
.tinte-amarillo { --tinte: var(--amarillo-claro); --tinte-borde: var(--amarillo-suave); }

/* Comunidad ---------------------------------------------------------------- */

/* La banda Comunidad (collage editorial) vive en css/editorial.css */

.comunidad__feed { padding-block: var(--seccion); }

.feed__bloque + .feed__bloque { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }

.feed__titulo { margin-bottom: clamp(18px, 2vw, 32px); }

.feed__lista { display: grid; gap: clamp(14px, 1.6vw, 26px); }

.feed__pie { margin-top: clamp(20px, 2vw, 32px); text-align: center; }

@media (min-width: 620px) and (max-width: 959px) {
  .feed__lista .tarjeta { flex-direction: row; }
  .feed__lista .tarjeta__imagen { width: 42%; aspect-ratio: auto; min-height: 200px; }
}

@media (min-width: 960px) {
  .feed__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Convenios ---------------------------------------------------------------- */

.convenios { padding-top: 0; }

.convenios__cabecera { max-width: 46em; margin-bottom: clamp(22px, 2.6vw, 40px); }
.convenios__cabecera p { margin-top: 12px; color: var(--texto-secundario); }

.convenios__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 22px);
}

.convenio img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radio-m);
  transition: transform 0.25s var(--ease);
}

.convenio:hover img { transform: translateY(-4px) scale(1.02); }

@media (max-width: 559px) {
  /* Cinco logos en dos columnas: el último se centra */
  .convenio:last-child { grid-column: 1 / -1; width: calc(50% - clamp(10px, 1.4vw, 22px) / 2); margin-inline: auto; }
}

@media (min-width: 560px) {
  .convenios__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Virtual tour ------------------------------------------------------------- */

.tour__panel {
  padding: clamp(16px, 3vw, 48px);
  border-radius: var(--radio-l);
  background: var(--superficie-profunda);
  color: var(--texto-invertido);
}

.tour__titulo { margin-bottom: clamp(16px, 2vw, 30px); }
.tour__titulo span { color: var(--amarillo); }

.tour__marco {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  width: 100%;
  border-radius: var(--radio-m);
  background: var(--petroleo-profundo);
}

.tour__marco iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 559px) {
  .tour__marco { aspect-ratio: 4 / 5; }
}

/* Ubicación: sección propia, en celeste, separada del footer ---------------- */

.ubicacion {
  margin-top: var(--seccion);
  margin-bottom: clamp(18px, 2.4vw, 36px);
  border-radius: var(--radio-seccion);
  background: var(--petroleo);
  color: var(--texto-invertido);
}

.ubicacion__grilla { display: grid; gap: clamp(26px, 4vw, 64px); align-items: stretch; }

.ubicacion__intro { margin-top: 14px; max-width: 36em; }
.ubicacion__subtitulo { margin: clamp(22px, 2.6vw, 36px) 0 10px; }

.cercanos {
  padding: 6px clamp(14px, 1.6vw, 22px);
  border-radius: var(--radio-m);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.cercanos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  font-weight: 600;
}

.cercanos li + li { border-top: 1px solid var(--borde); }

.cercanos__tiempo {
  flex: none;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--petroleo-claro);
  color: var(--petroleo-profundo);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ubicacion__mapa {
  overflow: hidden;
  min-height: 340px;
  border-radius: var(--radio-l);
  background: var(--petroleo-claro);
  box-shadow: var(--sombra-elevada);
}

.ubicacion__mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }

@media (min-width: 900px) {
  .ubicacion__grilla { grid-template-columns: 5fr 7fr; }
}

/* Footer ------------------------------------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem);
  border-radius: var(--radio-seccion) var(--radio-seccion) 0 0;
  background: var(--petroleo);
  color: var(--texto-invertido);
}

/* Chevrones decorativos del manual, en dos tonos */
.footer::before,
.footer::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: clamp(200px, 28vw, 480px);
  background: var(--petroleo-profundo);
  -webkit-clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
  clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}

.footer::before { right: -2%; opacity: 0.7; }
.footer::after { right: 12%; opacity: 0.3; }

.footer .contenedor { position: relative; z-index: 1; }

.footer__logo { display: block; width: clamp(180px, 20vw, 300px); margin-bottom: clamp(26px, 3vw, 48px); }
.footer__logo svg { width: 100%; height: auto; fill: currentColor; }

.footer__columnas { display: grid; gap: 30px 24px; }

.footer h2 {
  margin-bottom: 12px;
  color: var(--texto-invertido);
  font-size: var(--t-chico);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer a { color: var(--texto-invertido); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__lista li + li { margin-top: 6px; }

.footer__contacto a,
.footer__direccion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-wrap: anywhere;
}

.footer__contacto .icono,
.footer__direccion .icono { width: 22px; height: 22px; margin-top: 2px; stroke-width: 2.62; }

@media (min-width: 560px) {
  .footer__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .footer__columnas { grid-template-columns: 1fr 1.3fr 0.8fr 1.4fr; }
}