/* Oncovive · Estilos del sitio. Todos los valores de marca vienen de tokens.css */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: var(--verde-profundo); text-decoration: none; }
a:hover { color: var(--tinta); }
strong, b { font-weight: var(--peso-negrita); }
:focus-visible { outline: 3px solid var(--verde-profundo); outline-offset: 3px; border-radius: 4px; }
.sobre-oscuro :focus-visible, .pie :focus-visible, .barra :focus-visible { outline-color: var(--verde-vida); }
[id] { scroll-margin-top: 96px; }

.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--blanco); padding: 12px 18px; z-index: 100; }
.saltar:focus { left: 12px; top: 12px; color: var(--blanco); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-weight: var(--peso-negrita); font-size: var(--t-cuerpo); line-height: 1.2;
  padding: 17px 30px; border-radius: var(--radio-pildora); border: 2px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s;
}
.boton--primario { background: var(--verde-vida); border-color: var(--verde-vida); color: var(--tinta); }
.boton--primario:hover { background: var(--verde-hoja); border-color: var(--verde-hoja); color: var(--tinta); }
.boton--secundario { border-color: var(--grafito); color: var(--grafito); background: transparent; }
.boton--secundario:hover { background: var(--grafito); color: var(--blanco); }
.boton--contorno { border-color: var(--verde-vida); color: var(--verde-profundo); padding: 14px 30px; }
.boton--contorno:hover { background: var(--verde-vida); color: var(--tinta); }
.boton--chico { font-size: var(--t-chico); padding: 12px 22px; }
.enlace-flecha { font-weight: var(--peso-negrita); font-size: var(--t-chico); color: var(--verde-profundo); }
.enlace-flecha--l { font-size: var(--t-cuerpo); }

/* --- Etiqueta (eyebrow) ------------------------------------------------- */
.etiqueta {
  font-size: var(--t-micro); font-weight: var(--peso-negrita);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--verde-profundo);
}
.etiqueta--barra { display: flex; align-items: center; gap: 14px; }
.etiqueta--barra::before { content: ""; width: 40px; height: 4px; background: var(--verde-vida); flex: none; }

/* --- Barra superior ----------------------------------------------------- */
.barra { background: var(--tinta); color: var(--blanco); font-size: var(--t-micro); }
.barra .contenedor { padding-top: 10px; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.barra__grupo { display: flex; gap: 8px 28px; flex-wrap: wrap; align-items: center; }
.barra a { color: var(--blanco); }
.barra a:hover { color: var(--verde-vida); }
.barra__clave { color: var(--verde-vida); font-weight: var(--peso-negrita); margin-right: 6px; }
.barra__secundario a { color: var(--sobre-oscuro); }

/* --- Encabezado --------------------------------------------------------- */
.encabezado { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.encabezado .contenedor { padding-top: 16px; padding-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.marca { display: flex; flex-shrink: 0; align-items: center; color: var(--tinta); }
.marca img { height: 50px; width: auto; }
/* Logotipo provisional en texto: se elimina cuando llegue el archivo oficial del logo */
.marca__provisional { font-size: 26px; font-weight: var(--peso-negrita); letter-spacing: -0.02em; color: var(--grafito); }
.nav { display: flex; gap: 28px; align-items: center; white-space: nowrap; }
.nav a:not(.boton) { color: var(--tinta); font-size: var(--t-chico); font-weight: var(--peso-semi); }
.nav a:not(.boton):hover { color: var(--verde-profundo); }
.nav-movil { display: none; gap: 12px; align-items: center; }
.menu-boton {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--grafito);
  background: var(--blanco); color: var(--grafito); font-size: 18px; font-weight: var(--peso-negrita);
  cursor: pointer; font-family: var(--fuente); line-height: 1;
}
.cajon { display: none; border-top: 1px solid var(--linea); padding: 10px var(--margen) 20px; flex-direction: column; }
.cajon a { color: var(--tinta); font-size: 16px; font-weight: var(--peso-semi); padding: 14px 0; border-bottom: 1px solid var(--linea-suave); }
.cajon a:last-child { border-bottom: 0; }
@media (max-width: 1099px) {
  .nav { display: none; }
  .nav-movil { display: flex; }
  .cajon[data-abierto="true"] { display: flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--niebla); overflow: hidden; }
.hero .contenedor { padding-top: 80px; padding-bottom: 90px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; }
.hero__texto { display: flex; flex-direction: column; gap: 28px; position: relative; z-index: 1; }
.hero h1 { font-size: var(--t-h1); font-weight: var(--peso-ligero); letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.hero__bajada { font-size: var(--t-cuerpo-l); line-height: 1.65; color: var(--texto-2); max-width: 520px; text-wrap: pretty; }
.hero__acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__acciones .boton--secundario { padding: 15px 28px; }
.hero__visual { position: relative; width: 100%; max-width: 620px; justify-self: center; }
.carrusel { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radio-foto); overflow: hidden; box-shadow: var(--sombra-foto); background: var(--piedra); }
.carrusel__lamina { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.carrusel__lamina[data-activa="true"] { opacity: 1; pointer-events: auto; }
.carrusel__lamina img { width: 100%; height: 100%; object-fit: cover; }
.sello { position: absolute; left: -22px; bottom: -26px; background: var(--blanco); border-radius: 18px; padding: 18px 22px; box-shadow: var(--sombra-flotante); display: flex; align-items: center; gap: 16px; z-index: 2; }
.sello__icono { width: 46px; height: 46px; border-radius: 50%; background: var(--bruma); display: flex; align-items: center; justify-content: center; color: var(--verde-profundo); font-weight: 800; font-size: 18px; flex: none; }
.sello__titulo { font-weight: var(--peso-negrita); font-size: var(--t-cuerpo); line-height: 1.3; }
.sello__nota { font-size: var(--t-micro); color: var(--texto-3); }
.puntos { display: flex; gap: 0; justify-content: flex-end; margin-top: 14px; }
.punto { background: none; border: 0; padding: 8px 4px; cursor: pointer; min-height: 24px; display: flex; align-items: center; }
.punto::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--punto-inactivo); transition: width .3s, background-color .3s; }
.punto[aria-current="true"]::before { width: 34px; background: var(--verde-vida); }
.marca-agua { position: absolute; pointer-events: none; user-select: none; }
.hero .marca-agua { left: -160px; bottom: -200px; height: 520px; opacity: 0.04; }
@media (max-width: 600px) {
  .hero .contenedor { padding-top: 48px; padding-bottom: 64px; gap: 40px; }
  .sello { left: 12px; bottom: -18px; padding: 14px 16px; }
  .boton { white-space: normal; }
}

/* Marcador de foto pendiente (se elimina al recibir fotografia real) */
.pendiente-foto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: repeating-linear-gradient(135deg, var(--piedra) 0 14px, var(--niebla) 14px 28px); color: var(--texto-2); font-size: var(--t-chico); font-weight: var(--peso-semi); }

/* --- Declaracion -------------------------------------------------------- */
.declaracion .contenedor { max-width: 1000px; padding-top: 110px; padding-bottom: 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.declaracion p { font-size: var(--t-declaracion); font-weight: var(--peso-ligero); line-height: 1.45; letter-spacing: -0.01em; text-wrap: balance; }
.declaracion strong { color: var(--verde-hoja); }

/* --- Servicios ---------------------------------------------------------- */
.servicios .contenedor { padding-top: 30px; padding-bottom: 110px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 26px; }
.tarjeta { background: var(--niebla); border-radius: var(--radio-tarjeta); padding: 40px 36px; display: flex; flex-direction: column; gap: 18px; border-top: 6px solid var(--verde-vida); transition: background-color .2s; }
.tarjeta--grafito { border-top-color: var(--grafito); }
.tarjeta:hover { background: var(--bruma); }
.tarjeta__num { font-family: var(--fuente-mono); font-size: var(--t-chico); color: var(--verde-profundo); font-weight: 500; }
.tarjeta h3 { font-size: var(--t-cuerpo); font-weight: var(--peso-negrita); letter-spacing: 0.2em; text-transform: uppercase; }
.tarjeta p { font-size: var(--t-tarjeta); font-weight: var(--peso-ligero); line-height: 1.3; }
.tarjeta .enlace-flecha { margin-top: auto; }

/* --- Especialidades ----------------------------------------------------- */
.especialidades { background: var(--niebla); }
.especialidades .contenedor { padding-top: 100px; padding-bottom: 100px; display: flex; flex-direction: column; gap: 44px; }
.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cabecera .etiqueta { margin-bottom: 14px; }
.titulo { font-size: var(--t-h2); font-weight: var(--peso-ligero); letter-spacing: -0.02em; line-height: 1.1; }
.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--piedra); border-radius: var(--radio-panel); overflow: hidden; list-style: none; margin: 0; padding: 0; }
.rejilla li { background: var(--blanco); padding: 32px 30px; display: flex; flex-direction: column; gap: 10px; transition: background-color .2s; }
.rejilla li:hover { background: var(--bruma); }
.rejilla h3 { font-size: var(--t-subtitulo); font-weight: var(--peso-negrita); }
.rejilla p { font-size: var(--t-cuerpo); line-height: 1.55; color: var(--texto-3); }
.rejilla li:hover p { color: var(--texto-2); }
@media (max-width: 1099px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .rejilla { grid-template-columns: minmax(0, 1fr); } }

/* --- Banda -------------------------------------------------------------- */
.banda { background: var(--grafito); color: var(--blanco); position: relative; overflow: hidden; }
.banda::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--verde-vida); }
.banda .marca-agua { right: -140px; top: 50%; transform: translateY(-50%); height: 640px; opacity: 0.08; filter: brightness(0) invert(1); }
.banda .contenedor { padding-top: 110px; padding-bottom: 110px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center; position: relative; }
.banda__foto { aspect-ratio: 4 / 3; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--tinta); }
.banda__foto img { width: 100%; height: 100%; object-fit: cover; }
.banda__texto { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.banda h2 { font-size: var(--t-h2-banda); font-weight: var(--peso-ligero); letter-spacing: -0.02em; line-height: 1.15; }
.banda h2 strong { color: var(--verde-vida); }
.banda__bajada { font-size: var(--t-cuerpo-l); line-height: 1.7; color: var(--sobre-oscuro); text-wrap: pretty; }
.publicos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid rgba(255, 255, 255, 0.18); padding: 24px 0 0; margin: 0; list-style: none; width: 100%; }
.publicos li { font-size: var(--t-cuerpo); font-weight: var(--peso-semi); line-height: 1.5; }
.publicos span { display: block; font-weight: var(--peso-regular); color: var(--sobre-oscuro-2); font-size: var(--t-chico); }
@media (max-width: 600px) { .banda .contenedor { padding-top: 72px; padding-bottom: 72px; } .publicos { grid-template-columns: 1fr; } }

/* --- Como solicitar ----------------------------------------------------- */
.pasos .contenedor { padding-top: 110px; padding-bottom: 110px; display: flex; flex-direction: column; gap: 48px; }
.pasos__cabecera { text-align: center; }
.pasos__cabecera .etiqueta { margin-bottom: 14px; }
.pasos__cabecera .titulo { line-height: 1.15; }
.pasos ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 40px; list-style: none; margin: 0; padding: 0; }
.pasos li { display: flex; flex-direction: column; gap: 14px; }
.paso__num { font-size: 64px; font-weight: var(--peso-ligero); color: var(--verde-hoja); line-height: 1; }
.paso__linea { height: 2px; background: var(--piedra); }
.pasos h3 { font-size: var(--t-subtitulo); font-weight: var(--peso-negrita); }
.pasos li p { font-size: var(--t-cuerpo); line-height: 1.6; color: var(--texto-3); }
.pasos__aviso { text-align: center; font-size: var(--t-micro); color: var(--texto-3); }

/* --- Pie ---------------------------------------------------------------- */
.pie { background: var(--tinta); color: var(--blanco); }
.pie .contenedor { padding-top: 90px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 60px; }
.pie__columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.pie__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pie__col--marca { gap: 20px; }
.pie .marca img { height: 56px; filter: brightness(0) invert(1); }
.pie .marca__provisional { color: var(--blanco); }
.pie__nota { font-size: var(--t-chico); line-height: 1.7; color: var(--sobre-oscuro-3); }
.pie h2 { font-size: var(--t-etiqueta); font-weight: var(--peso-negrita); letter-spacing: 0.24em; text-transform: uppercase; color: var(--verde-vida); }
.pie address, .pie__lista { font-style: normal; font-size: var(--t-cuerpo); line-height: 1.7; color: var(--sobre-oscuro); margin: 0; padding: 0; list-style: none; }
.pie a { color: var(--sobre-oscuro); }
.pie a:hover { color: var(--verde-vida); }
.pie__legal { border-top: 1px solid var(--linea-oscura); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--t-micro); color: var(--sobre-oscuro-3); }
@media (max-width: 1099px) { .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pie__columnas { grid-template-columns: minmax(0, 1fr); gap: 36px; } .pie .contenedor { padding-top: 64px; padding-bottom: 96px; } }

/* --- WhatsApp flotante -------------------------------------------------- */
.whatsapp-flotante { position: fixed; right: 26px; bottom: 26px; z-index: 30; background: var(--verde-vida); color: var(--tinta); font-weight: var(--peso-negrita); font-size: var(--t-chico); padding: 16px 22px; border-radius: var(--radio-pildora); box-shadow: var(--sombra-whatsapp); }
.whatsapp-flotante:hover { background: var(--verde-hoja); color: var(--tinta); }
@media (max-width: 600px) { .whatsapp-flotante { right: 16px; bottom: 16px; } }

/* --- Pagina 404 --------------------------------------------------------- */
.error { min-height: 70vh; display: flex; align-items: center; background: var(--niebla); }
.error .contenedor { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding-top: 80px; padding-bottom: 80px; }
.error h1 { font-size: var(--t-h2); font-weight: var(--peso-ligero); letter-spacing: -0.02em; line-height: 1.1; }
.error p { font-size: var(--t-cuerpo-l); color: var(--texto-2); max-width: 520px; }

/* --- Movimiento reducido ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Aviso de cookies --------------------------------------------------- */
.consentimiento { position: fixed; left: 26px; bottom: 26px; z-index: 40; max-width: 460px; background: var(--blanco); color: var(--texto); border: 1px solid var(--piedra); border-radius: var(--radio-panel); box-shadow: var(--sombra-flotante); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.consentimiento p { font-size: var(--t-chico); line-height: 1.55; color: var(--texto-2); }
.consentimiento a { text-decoration: underline; }
.consentimiento__acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--sobre-oscuro); cursor: pointer; text-align: left; }
.enlace-boton:hover { color: var(--verde-vida); }
@media (max-width: 600px) {
  .consentimiento { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  body[data-aviso-cookies="visible"] .whatsapp-flotante { display: none; }
}

/* --- Paginas legales ---------------------------------------------------- */
.legal { background: var(--blanco); }
.legal .contenedor { max-width: 820px; padding-top: 72px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 18px; }
.legal h1 { font-size: var(--t-h2); font-weight: var(--peso-ligero); letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; }
.legal h2 { font-size: var(--t-subtitulo); font-weight: var(--peso-negrita); margin-top: 22px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--texto-2); }
.legal ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal a { text-decoration: underline; }
.legal__fecha { font-size: var(--t-micro); color: var(--texto-3); }
.legal__resumen { background: var(--niebla); border-radius: var(--radio-panel); padding: 26px 28px; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.legal__resumen h2 { margin-top: 0; }
/* Dato pendiente del cliente: visible a proposito, no debe llegar a produccion */
.dato { background: var(--dato-pendiente); color: var(--tinta); padding: 1px 5px; border-radius: 4px; font-weight: var(--peso-semi); }
.borrador { background: var(--bruma); border-left: 6px solid var(--verde-vida); border-radius: 8px; padding: 16px 20px; font-size: var(--t-chico); color: var(--tinta); line-height: 1.55; }