/* Más Técnica · plantilla de las páginas de servicio. Referencia: docs/prototipo/Servicio_*_v27.dc.html
   Tamaños de títulos: los de base.css (escala de la sección 12 de CLAUDE.md). */

.rise { animation: rise 1s var(--ez) both; }
.rise2 { animation: rise 1s var(--ez) .2s both; }
.rise3 { animation: rise 1s var(--ez) .4s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Portada: texto y video 4:5 ---------- */
.sv-hero { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 40px 72px; align-items: center; padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(48px, 8vh, 96px); }
.ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: clamp(13px, 1vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.ruta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); text-decoration: none; }
.ruta a:hover { color: var(--texto); }
.ruta [aria-current] { color: var(--texto); }
/* H1 de las páginas de servicio: 36 px en el celular (excepción de la sección 12; empieza con la palabra clave y es más largo) */
.sv-txt h1 { margin-top: 8px; font-size: clamp(36px, 5.2vw, 72px); }
.sv-baj { margin-top: 20px; max-width: 30em; }
.sv-intro { margin: 16px 0 0; max-width: 34em; color: var(--texto-2); }
.sv-intro strong { color: var(--blanco); font-weight: 700; }
.sv-cta { margin-top: 28px; }

.vbox { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; justify-self: end; overflow: hidden; background: var(--superficie); }
.sv-fija, .sv-vid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.sv-vid { opacity: 0; }
.sv-vid.ok { opacity: 1; }
.vbox .pz { position: absolute; left: 6px; bottom: 6px; z-index: 2; }

/* ---------- Secciones ---------- */
.sv-sec { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 24px 72px; align-items: start; padding-top: clamp(40px, 7vh, 72px); padding-bottom: clamp(40px, 7vh, 72px); border-top: 1px solid var(--linea-suave); }
.sv-banda { background: var(--superficie); border-top: 0; }
.inc-intro { margin: 0 0 16px; line-height: 1.5; color: var(--texto-2); }
.tl-row a, .faq p a { text-underline-offset: 4px; }

/* ---------- Cierre: fundido del verde marca hacia negro ---------- */
.sv-cierre { padding-top: clamp(48px, 8vh, 88px); padding-bottom: clamp(48px, 8vh, 88px); background: linear-gradient(180deg, var(--verde-marca) 0%, var(--fondo) 100%); text-align: center; }
.sv-cierre-p { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; }
.sv-cierre-cta { margin-top: 28px; }

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  .sv-hero, .sv-sec { grid-template-columns: minmax(0,1fr); }
  .vbox { justify-self: stretch; max-width: none; }
  /* Aire abajo para que el último renglón de cada sección quede por encima del botón flotante de WhatsApp */
  .sv-sec, .sv-cierre { padding-bottom: 88px; }
}