/* ==========================================================================
   ALFA CLEAN — Secciones especificas
   ========================================================================== */

/* ==========================================================================
   HERO CINEMATOGRAFICO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bosque);
  padding-top: var(--alto-nav);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
}

.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zoom lentisimo: apenas perceptible, da vida sin distraer */
.hero__video {
  animation: hero-zoom 32s var(--ease-suave) infinite alternate;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { animation: none; }
}

/* Velo de contraste: garantiza legibilidad sobre cualquier video */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(1,29,17,0.94) 0%, rgba(1,29,17,0.78) 42%, rgba(1,29,17,0.40) 100%),
    linear-gradient(to top, rgba(1,29,17,0.72) 0%, transparent 42%);
}

.hero__contenido {
  position: relative;
  z-index: var(--z-contenido);
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--sp-8) var(--gutter) var(--sp-9);
}

.hero__interior { max-width: min(760px, 100%); }

.hero__eslogan {
  display: block;
  font-family: var(--font-titulo);
  font-size: clamp(0.66rem, 1.1vw, 0.8rem);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-eslogan);
  text-transform: uppercase;
  color: var(--hoja-clara);
  margin-bottom: var(--sp-5);
}

.hero__titulo {
  font-size: var(--t-display);
  font-weight: var(--peso-black);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--blanco);
  margin-bottom: var(--sp-5);
}

/* Revelado del titular linea por linea, con mascara */
.linea-mascara { display: block; overflow: hidden; }
.linea-mascara > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-corte) var(--ease-corte);
}
.hero.listo .linea-mascara > span { transform: none; }
.hero.listo .linea-mascara:nth-of-type(1) > span { transition-delay: 120ms; }
.hero.listo .linea-mascara:nth-of-type(2) > span { transition-delay: 240ms; }
.hero.listo .linea-mascara:nth-of-type(3) > span { transition-delay: 360ms; }

/* El acento verde sobre la palabra clave del titular */
.hero__acento { color: var(--hoja-clara); }

.hero__texto {
  font-size: var(--t-body-lg);
  color: rgba(234, 240, 228, 0.86);
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* Entrada escalonada de los elementos secundarios del hero */
.hero__texto,
.hero__ctas,
.hero__eslogan,
.hero__pie {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-lenta) var(--ease-suave),
              transform var(--dur-lenta) var(--ease-suave);
}
.hero.listo .hero__eslogan { opacity: 1; transform: none; transition-delay: 60ms; }
.hero.listo .hero__texto  { opacity: 1; transform: none; transition-delay: 560ms; }
.hero.listo .hero__ctas   { opacity: 1; transform: none; transition-delay: 680ms; }
.hero.listo .hero__pie    { opacity: 1; transform: none; transition-delay: 800ms; }

.hero__pie {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--t-small);
  line-height: 1.55;
  color: rgba(234, 240, 228, 0.68);
  max-width: 54ch;
}
.hero__pie svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--hoja-clara); }
.hero__pie strong { color: var(--hoja-clara); font-weight: var(--peso-semi); }

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: var(--z-contenido);
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  color: rgba(234, 240, 228, 0.6);
  font-family: var(--font-titulo);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}
.hero__scroll-linea {
  width: 1px;
  height: 46px;
  background: rgba(234, 240, 228, 0.28);
  position: relative;
  overflow: hidden;
}
.hero__scroll-linea::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--hoja-clara);
  animation: scroll-baja 2.4s var(--ease-suave) infinite;
}
@keyframes scroll-baja {
  0%   { top: -100%; }
  60%, 100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-linea::after { animation: none; top: 0; opacity: 0.5; }
}

/* ==========================================================================
   HERO INTERNO (paginas que no son la home)
   ========================================================================== */

.hero-interno {
  position: relative;
  padding-top: calc(var(--alto-nav) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background: var(--bosque);
  color: var(--bruma);
  overflow: hidden;
}

.hero-interno::after {
  content: '';
  position: absolute;
  right: -8%;
  top: -30%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(91,131,27,0.26) 0%, transparent 68%);
  pointer-events: none;
}

.hero-interno__contenido { position: relative; z-index: var(--z-contenido); max-width: 64ch; }
.hero-interno h1 { color: var(--blanco); margin-bottom: var(--sp-4); }
.hero-interno p { color: rgba(234, 240, 228, 0.82); font-size: var(--t-body-lg); max-width: 56ch; }

.miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-size: var(--t-micro);
  color: rgba(234, 240, 228, 0.55);
}
.miga li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.miga li:not(:last-child)::after { content: '/'; color: rgba(234, 240, 228, 0.3); }
.miga a { color: rgba(234, 240, 228, 0.72); }
.miga a:hover { color: var(--hoja-clara); }

.hero-interno__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ==========================================================================
   BLOQUE COMERCIAL — la seccion mas importante del sitio
   ========================================================================== */

.comercial { position: relative; overflow: hidden; }

.comercial::before {
  content: '';
  position: absolute;
  left: -10%; bottom: -35%;
  width: 52%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(91,131,27,0.22) 0%, transparent 66%);
  pointer-events: none;
}

.comercial__interior {
  position: relative;
  z-index: var(--z-contenido);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.comercial__lista {
  list-style: none;
  margin: var(--sp-5) 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.comercial__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  color: rgba(234, 240, 228, 0.86);
}
.comercial__lista svg {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 4px;
  color: var(--hoja-clara);
}

.comercial__tipos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.comercial__tipo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(234, 240, 228, 0.14);
  border-radius: var(--r-md);
  font-family: var(--font-titulo);
  font-weight: var(--peso-semi);
  font-size: 0.95rem;
  color: var(--blanco);
  transition: background-color var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave);
}
.comercial__tipo:hover {
  background: rgba(143, 191, 63, 0.14);
  border-color: rgba(143, 191, 63, 0.45);
  transform: translateY(-3px);
}
.comercial__tipo svg { width: 24px; height: 24px; flex: none; color: var(--hoja-clara); }

/* ==========================================================================
   LINEAS ECO (Eco Baby / EcoPet)
   ========================================================================== */

.eco { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

.eco__tarjeta {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
.eco__tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }

.eco__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.eco__media img, .eco__media .marcador {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-suave);
}
.eco__tarjeta:hover .eco__media img,
.eco__tarjeta:hover .eco__media .marcador { transform: scale(1.05); }

.eco__insignia {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.85rem;
  background: var(--blanco);
  border-radius: var(--r-full);
  font-family: var(--font-titulo);
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verde-alfa);
  box-shadow: var(--sombra-sm);
}
.eco__insignia svg { width: 15px; height: 15px; color: var(--verde-hoja); }

.eco__cuerpo { padding: var(--sp-5); display: flex; flex-direction: column; }
.eco__titulo { font-size: var(--t-h3); margin-bottom: var(--sp-3); }
.eco__texto { color: var(--pizarra); font-size: var(--t-small); margin-bottom: var(--sp-4); }

.eco__puntos { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.eco__puntos li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0; font-size: var(--t-small); color: var(--pizarra);
}
.eco__puntos svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--verde-hoja); }

.eco__cta { margin-top: auto; }

/* ==========================================================================
   LISTADO DE SERVICIOS DETALLADO
   ========================================================================== */

.servicios-detalle { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); }

.servicio-item {
  padding: var(--sp-5);
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--verde-hoja);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              border-left-color var(--dur-media) var(--ease-suave);
}
.servicio-item:hover {
  transform: translateX(5px);
  box-shadow: var(--sombra-md);
  border-left-color: var(--verde-alfa);
}
.servicio-item__titulo { font-size: var(--t-h4); margin-bottom: var(--sp-2); }
.servicio-item__texto { font-size: var(--t-small); color: var(--pizarra); margin: 0; }

/* Destacado: la especialidad principal */
.servicio-item--destacado {
  background: var(--verde-alfa);
  border-color: var(--verde-alfa);
  border-left-color: var(--hoja-clara);
  color: var(--bruma);
  grid-column: span 2;
}
.servicio-item--destacado .servicio-item__titulo { color: var(--blanco); }
.servicio-item--destacado .servicio-item__texto { color: rgba(234, 240, 228, 0.82); }
.servicio-item--destacado .etiqueta { color: var(--hoja-clara); }

/* ==========================================================================
   FRECUENCIAS / PLANES RECURRENTES
   ========================================================================== */

.frecuencias { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }

.frecuencia {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--r-lg);
  transition: transform var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
.frecuencia:hover {
  transform: translateY(-6px);
  border-color: var(--verde-hoja);
  box-shadow: var(--sombra-md);
}
.frecuencia__icono { color: var(--verde-hoja); margin-bottom: var(--sp-3); }
.frecuencia__icono svg { width: 30px; height: 30px; margin-inline: auto; }
.frecuencia__titulo { font-size: var(--t-h4); margin-bottom: var(--sp-1); }
.frecuencia__texto { font-size: var(--t-micro); color: var(--pizarra); margin: 0; }

.frecuencia--destacada {
  background: var(--verde-alfa);
  border-color: var(--verde-alfa);
}
.frecuencia--destacada .frecuencia__titulo { color: var(--blanco); }
.frecuencia--destacada .frecuencia__texto { color: rgba(234, 240, 228, 0.78); }
.frecuencia--destacada .frecuencia__icono { color: var(--hoja-clara); }

/* ==========================================================================
   BLOQUE DE CONVERSION FINAL
   ========================================================================== */

.conversion {
  position: relative;
  background: var(--verde-alfa);
  color: var(--bruma);
  overflow: hidden;
}
.conversion::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0.028) 0px,
      rgba(255,255,255,0.028) 1px,
      transparent 1px,
      transparent 22px);
  pointer-events: none;
}
.conversion__interior {
  position: relative;
  z-index: var(--z-contenido);
  text-align: center;
  max-width: min(760px, 100%);
  margin-inline: auto;
}
.conversion h2 { color: var(--blanco); font-size: var(--t-h1); }
.conversion__contacto svg { width: 17px; height: 17px; color: var(--hoja-clara); display: inline-block; vertical-align: -3px; }
.conversion p { color: rgba(234, 240, 228, 0.86); font-size: var(--t-body-lg); margin-bottom: var(--sp-6); }
.conversion__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

.conversion__contacto {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(234, 240, 228, 0.16);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  font-size: var(--t-small);
}
.conversion__contacto a { color: var(--hoja-clara); }

/* ==========================================================================
   CUADRICULA DE INSTAGRAM
   ========================================================================== */

.instagram { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }

.instagram__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--verde-alfa);
}
.instagram__item img, .instagram__item .marcador {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-media) var(--ease-suave);
}
.instagram__item:hover img, .instagram__item:hover .marcador { transform: scale(1.07); }

.instagram__velo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2, 52, 30, 0.72);
  color: var(--blanco);
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
}
.instagram__item:hover .instagram__velo { opacity: 1; }
.instagram__velo svg { width: 24px; height: 24px; }

/* ==========================================================================
   PAGINA DE GRACIAS
   ========================================================================== */

.gracias {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--bosque);
  color: var(--bruma);
  text-align: center;
  padding: calc(var(--alto-nav) + var(--sp-8)) var(--gutter) var(--sp-8);
}
.gracias__interior { max-width: 58ch; }

.gracias__sello {
  width: 92px; height: 92px;
  margin: 0 auto var(--sp-5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(143, 191, 63, 0.16);
  color: var(--hoja-clara);
  animation: sello-entra 700ms var(--ease-corte) forwards;
}
.gracias__sello svg { width: 44px; height: 44px; }
@keyframes sello-entra {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gracias__sello { animation: none; }
}

.gracias h1 { color: var(--blanco); }
.gracias p { color: rgba(234, 240, 228, 0.84); font-size: var(--t-body-lg); }

.gracias__siguientes {
  list-style: none;
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(234,240,228,0.14);
  border-radius: var(--r-lg);
  text-align: left;
  display: grid;
  gap: var(--sp-3);
}
.gracias__siguientes li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0; font-size: var(--t-small);
  color: rgba(234,240,228,0.82);
}
.gracias__siguientes svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--hoja-clara); }

.gracias__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ==========================================================================
   SOBRE NOSOTROS
   ========================================================================== */

.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

.valor {
  padding: var(--sp-6) var(--sp-5);
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.valor::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--verde-hoja);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-corte) var(--ease-corte);
}
.valor.visible::before { transform: scaleX(1); }

.valor__numero {
  font-family: var(--font-titulo);
  font-size: var(--t-micro);
  font-weight: var(--peso-bold);
  letter-spacing: var(--tracking-etiqueta);
  color: var(--verde-hoja);
  margin-bottom: var(--sp-3);
}
.valor__titulo { font-size: var(--t-h3); margin-bottom: var(--sp-3); }
.valor__texto { color: var(--pizarra); font-size: var(--t-small); margin: 0; }

.cita {
  position: relative;
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--font-titulo);
  font-size: var(--t-h1);
  font-weight: var(--peso-bold);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--blanco);
}
.cita__autor {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-texto);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--hoja-clara);
}

/* ==========================================================================
   COBERTURA (ciudades)
   ========================================================================== */

.cobertura { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

.ciudad {
  position: relative;
  padding: var(--sp-6);
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
.ciudad:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }

.ciudad__nombre {
  font-family: var(--font-titulo);
  font-size: var(--t-h2);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  color: var(--verde-alfa);
  margin-bottom: var(--sp-2);
}
.ciudad__texto { color: var(--pizarra); font-size: var(--t-small); margin: 0; }
.ciudad__marca {
  position: absolute;
  right: -10px; bottom: -22px;
  font-family: var(--font-titulo);
  font-size: 7rem;
  font-weight: var(--peso-black);
  line-height: 1;
  color: var(--bruma);
  pointer-events: none;
  z-index: 0;
}
.ciudad > * { position: relative; z-index: 1; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */

.contacto-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-5);
}

.contacto-tarjeta {
  padding: var(--sp-6) var(--sp-5);
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--r-lg);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
.contacto-tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); }

.contacto-tarjeta__icono {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--bruma);
  color: var(--verde-alfa);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.contacto-tarjeta__icono svg { width: 25px; height: 25px; }
.contacto-tarjeta__titulo { font-size: var(--t-h4); margin-bottom: var(--sp-2); }
.contacto-tarjeta__dato { display: block; font-size: var(--t-small); color: var(--pizarra); }
.contacto-tarjeta__dato a { font-weight: var(--peso-medio); }

/* ==========================================================================
   GALERIA Y TESTIMONIOS
   Ambas secciones llegan con hidden y solo se muestran cuando el panel de
   administracion tiene contenido cargado. Nunca se ve una seccion vacia.
   ========================================================================== */

.galeria__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.galeria__item {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--verde-alfa);
  aspect-ratio: 4 / 3;
}
.galeria__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-suave);
}
.galeria__item:hover img { transform: scale(1.05); }

.galeria__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(1,29,17,0.88), transparent);
  color: var(--blanco);
  font-family: var(--font-titulo);
  font-weight: var(--peso-semi);
  font-size: var(--t-small);
  line-height: 1.35;
}

.testimonios__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}

.testimonio {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--blanco);
  border: 1px solid var(--piedra);
  border-radius: var(--r-lg);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
.testimonio:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); }

.testimonio::before {
  content: '\201C';
  position: absolute;
  top: 4px; left: var(--sp-5);
  font-family: var(--font-titulo);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--bruma);
  pointer-events: none;
}

.testimonio__texto {
  position: relative;
  margin: 0 0 var(--sp-4);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--tinta);
}

.testimonio__pie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--piedra);
}
.testimonio__nombre {
  font-family: var(--font-titulo);
  font-weight: var(--peso-semi);
  color: var(--verde-alfa);
  font-size: var(--t-small);
}
.testimonio__ciudad { font-size: var(--t-micro); color: var(--pizarra); }

.seccion--oscura .testimonio {
  background: rgba(255,255,255,0.05);
  border-color: rgba(234,240,228,0.14);
}
.seccion--oscura .testimonio::before { color: rgba(143,191,63,0.18); }
.seccion--oscura .testimonio__texto { color: var(--bruma); }
.seccion--oscura .testimonio__pie { border-top-color: rgba(234,240,228,0.14); }
.seccion--oscura .testimonio__nombre { color: var(--hoja-clara); }
.seccion--oscura .testimonio__ciudad { color: rgba(234,240,228,0.6); }