/* =====================================================================
   Nutrition Side — sistema de diseño
   Paleta y tipografía tomadas de docs/diseno/*.dc.html (maquetas reales).

   Dos superficies:
     por omisión  sitio público    — blanco y crema, navy y verde
     .oscuro      área de miembros — navy profundo, para ver video sin fatiga

   Mobile first. Lo que crece usa clamp(), no media queries sueltas.
   ===================================================================== */

@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/glacial-indifference-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* --- marca --- */
  --navy:        #001524;
  --navy-80:     #05202F;
  --navy-60:     #0E2C3E;
  --navy-40:     #12384E;
  --verde:       #8BC34A;
  --verde-hover: #A3D46A;
  --verde-hondo: #6FA537;

  /* --- neutros cálidos, de las maquetas --- */
  --crema:        #F4F4EF;
  --arena:        #F6EEDA;
  --menta:        #DFEDE8;
  --piedra:       #B7B7A4;
  --piedra-clara: #C7C7B7;
  --hueso:        #E8E8E0;

  /* --- texto --- */
  --tinta:       #001524;
  --tinta-suave: #4A4A44;
  --tinta-tenue: #7C7C74;
  --hielo:       #F2F4F5;
  --hielo-suave: #B9C8D2;
  --hielo-tenue: #8FA6B4;
  --hielo-apaga: #6E8697;

  --blanco: #FFFFFF;

  /* --- semánticos --- */
  --ok:    #8BC34A;
  --aviso: #E0A93B;
  --error: #D9614C;

  /* --- tipografía --- */
  /* Jost conserva correctamente las tildes y la ñ en titulares grandes. */
  --tit: Jost, "Century Gothic", "Helvetica Neue", system-ui, sans-serif;
  --ui:  Jost, "Century Gothic", "Helvetica Neue", system-ui, sans-serif;

  /* Escala fluida: el valor menor manda en móvil, el mayor en escritorio */
  --t-display: clamp(2.25rem, 1.30rem + 4.2vw, 4.125rem);  /* 36 -> 66px */
  --t-h1:      clamp(1.95rem, 1.30rem + 2.9vw, 3.375rem);  /* 31 -> 54px */
  --t-h2:      clamp(1.60rem, 1.20rem + 1.8vw, 2.625rem);  /* 26 -> 42px */
  --t-h3:      clamp(1.25rem, 1.08rem + 0.8vw, 1.75rem);   /* 20 -> 28px */
  --t-cuerpo:  clamp(0.97rem, 0.93rem + 0.18vw, 1.06rem);  /* 15.5 -> 17px */
  --t-menor:   0.875rem;
  --t-micro:   0.75rem;

  /* --- ritmo --- */
  --r1: 4px;   --r2: 8px;   --r3: 12px;  --r4: 16px;
  --r5: 24px;  --r6: 32px;  --r7: 48px;  --r8: 64px;  --r9: 96px;

  --margen: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --ancho:  1240px;

  --curva:   18px;
  --pildora: 60px;

  --sombra:      0 1px 2px rgba(0,21,36,.06), 0 4px 16px rgba(0,21,36,.06);
  --sombra-alta: 0 8px 40px rgba(0,21,36,.12);

  --transicion: 160ms cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   Reinicio
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--tit);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

/* Foco visible siempre. Es requisito de accesibilidad, no adorno. */
:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: var(--r1);
}

/* Salto al contenido, para teclado y lector de pantalla */
.saltar {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--blanco);
  padding: var(--r3) var(--r5);
  border-radius: 0 0 var(--curva) 0;
  z-index: 100;
}
.saltar:focus { left: 0; top: 0; }

/* =====================================================================
   Estructura
   ===================================================================== */
.envoltura {
  width: 100%; max-width: var(--ancho);
  margin-inline: auto; padding-inline: var(--margen);
}
.seccion       { padding-block: clamp(3rem, 1.6rem + 6vw, 6rem); }
.seccion-corta { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

/* Patrones sutiles reutilizables: dan ritmo sin competir con el contenido. */
.patron-suave {
  background-color: #fbfcf8;
  background-image: radial-gradient(rgba(75,126,35,.11) .8px, transparent .8px);
  background-size: 24px 24px;
}
.patron-lineal {
  background-color: var(--crema);
  background-image: linear-gradient(135deg, rgba(139,195,74,.045) 25%, transparent 25%,
    transparent 50%, rgba(139,195,74,.045) 50%, rgba(139,195,74,.045) 75%,
    transparent 75%, transparent);
  background-size: 34px 34px;
}
.catalogo-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.catalogo-productos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 380px));
  justify-content: start;
}
.rejilla.tres.catalogo-servicios {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 980px) {
  .rejilla.tres.catalogo-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rejilla.tres.catalogo-servicios { grid-template-columns: 1fr; }
}

.crema { background: var(--crema); }
.menta { background: var(--menta); }
.arena { background: var(--arena); }
.navy  { background: var(--navy); color: var(--hielo); }
.navy h1, .navy h2, .navy h3 { color: var(--blanco); }

.pila  { display: flex; flex-direction: column; }
.fila  { display: flex; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.centro{ justify-content: center; }
.g1 { gap: var(--r1); } .g2 { gap: var(--r2); } .g3 { gap: var(--r3); }
.g4 { gap: var(--r4); } .g5 { gap: var(--r5); } .g6 { gap: var(--r6); }

/* Rejilla que se reacomoda sola, sin media query por columna */
.rejilla        { display: grid; gap: var(--r5); }
.rejilla.dos    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rejilla.tres   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rejilla.cuatro { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* =====================================================================
   Tipografía de apoyo
   ===================================================================== */
.display {
  font-family: var(--tit); font-weight: 700; font-size: var(--t-display);
  line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance;
}
.rotulo {
  font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 500;
}
.navy .rotulo, .oscuro .rotulo { color: var(--hielo-apaga); }

.entrada { font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); color: var(--tinta-suave); max-width: 62ch; }
.navy .entrada, .oscuro .entrada { color: var(--hielo-suave); }

.menor { font-size: var(--t-menor); }
.tenue { color: var(--tinta-tenue); }
.oscuro .tenue, .navy .tenue { color: var(--hielo-apaga); }
.medio { font-weight: 600; }

/* =====================================================================
   Botones
   ===================================================================== */
.btn {
  --btn-fondo: var(--verde);
  --btn-texto: var(--blanco);
  --btn-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 48px;                 /* objetivo táctil cómodo en móvil */
  padding: 0 var(--r5);
  border: 1px solid var(--btn-borde);
  border-radius: var(--pildora);
  background: var(--btn-fondo);
  color: var(--btn-texto);
  font-size: var(--t-menor); font-weight: 600; letter-spacing: .01em;
  cursor: pointer; text-align: center;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.btn:hover  { --btn-fondo: var(--verde-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn.contorno { --btn-fondo: transparent; --btn-texto: var(--tinta); --btn-borde: rgba(0,21,36,.22); }
.btn.contorno:hover { --btn-fondo: rgba(0,21,36,.04); --btn-borde: rgba(0,21,36,.4); }
.oscuro .btn.contorno,
.navy .btn.contorno {
  --btn-texto: var(--blanco);
  --btn-borde: rgba(255,255,255,.28);
}
.oscuro .btn.contorno:hover,
.navy .btn.contorno:hover { --btn-fondo: rgba(255,255,255,.08); }

.btn.tinta { --btn-fondo: var(--navy); }
.btn.tinta:hover { --btn-fondo: var(--navy-40); }

.btn.ancho  { width: 100%; }
.btn.chico  { min-height: 38px; padding: 0 var(--r4); font-size: var(--t-micro); }
.btn.grande { min-height: 56px; padding: 0 var(--r6); font-size: 1rem; }

.enlace {
  color: var(--verde-hondo); font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.enlace:hover { color: var(--verde); }
.oscuro .enlace, .navy .enlace { color: var(--verde); }

/* =====================================================================
   Tarjetas
   ===================================================================== */
.tarjeta {
  background: var(--blanco);
  border: 1px solid rgba(0,21,36,.10);
  border-radius: var(--curva);
  padding: var(--r5);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta.enlazable:hover { border-color: rgba(0,21,36,.28); box-shadow: var(--sombra); }
.tarjeta.destacada { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }

.oscuro .tarjeta { background: var(--navy-80); border-color: var(--navy-60); }
.oscuro .tarjeta.enlazable:hover { border-color: var(--navy-40); box-shadow: none; }

/* Tarjetas editoriales de programas, consultas y productos. */
.tarjeta-producto {
  display: grid; grid-template-rows: auto 1fr;
  padding: 0; overflow: hidden; min-height: 100%;
  border-radius: 24px; box-shadow: var(--sombra);
}
.tarjeta-producto:hover { transform: translateY(-2px); }
.producto-imagen {
  display: grid; place-items: center; aspect-ratio: 1 / 1;
  overflow: hidden; background: linear-gradient(145deg, #fafaf7, var(--crema));
  border-bottom: 1px solid rgba(0,21,36,.08);
}
.producto-imagen img { width: 100%; height: 100%; object-fit: contain; }
.producto-imagen.recorte-anualidad img { object-fit: cover; object-position: 40% center; }
.producto-sin-imagen {
  max-width: 16ch; padding: var(--r6); text-align: center;
  font-family: var(--tit); font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: 700; line-height: 1.05;
}
.producto-contenido { padding: clamp(var(--r5), 3vw, var(--r6)); }
.producto-contenido h3 {
  font-size: clamp(1.25rem, 1.08rem + .55vw, 1.65rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.producto-ficha-imagen {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1 / 1; max-width: 620px;
  background: var(--crema); border-radius: 24px;
}
.producto-ficha-imagen img { width: 100%; height: 100%; object-fit: contain; }

.beneficio { padding: clamp(var(--r5), 3vw, var(--r6)); }
.numero-beneficio {
  color: var(--verde-hondo); font-family: var(--tit); font-size: var(--t-menor);
  font-weight: 700; letter-spacing: .12em;
}
.llamada-programas {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r7); padding: clamp(var(--r6), 5vw, var(--r8));
  background: var(--menta); border-color: rgba(75,126,35,.12);
}
.acceso-existente {
  padding: var(--r5); overflow: hidden;
  background-color: var(--crema);
  background-image: radial-gradient(rgba(75,126,35,.12) .8px, transparent .8px);
  background-size: 20px 20px;
  border-color: rgba(75,126,35,.12);
}
.acceso-existente .btn { align-self: flex-start; }
@media (max-width: 760px) {
  .llamada-programas { align-items: flex-start; flex-direction: column; }
}

/* Marcador de estado */
.marca {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--r3); border-radius: var(--pildora);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em;
  background: rgba(0,21,36,.06); color: var(--tinta-suave);
  white-space: nowrap;
}
.marca.vigente { background: rgba(139,195,74,.16); color: var(--verde-hondo); }
.marca.espera  { background: rgba(224,169,59,.18); color: #8A6520; }
.marca.vencida { background: rgba(217,97,76,.14);  color: #A8412F; }
.oscuro .marca { background: rgba(255,255,255,.07); color: var(--hielo-suave); }
.oscuro .marca.vigente { background: rgba(139,195,74,.18); color: var(--verde); }

/* Portada con relación de aspecto fija: evita el salto al cargar */
.portada {
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--piedra), #8E8E7C);
  border-radius: calc(var(--curva) - 4px);
  position: relative; overflow: hidden;
}
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada .play { position: absolute; inset: 0; display: grid; place-items: center; }
.portada .play span {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--verde); display: grid; place-items: center;
}
.barra-avance {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: rgba(0,0,0,.35);
}
.barra-avance i { display: block; height: 100%; background: var(--verde); }

/* =====================================================================
   Formularios
   ===================================================================== */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--r4); }
.campo label { font-size: var(--t-menor); font-weight: 500; }
.campo .ayuda { font-size: var(--t-micro); color: var(--tinta-tenue); }
.oscuro .campo .ayuda { color: var(--hielo-apaga); }

.campo input, .campo select, .campo textarea {
  min-height: 48px; padding: 0 var(--r4);
  background: var(--blanco);
  border: 1px solid rgba(0,21,36,.22);
  border-radius: var(--curva);
  width: 100%;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 120px; padding: var(--r3) var(--r4); resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(139,195,74,.22);
}
.oscuro .campo input, .oscuro .campo select, .oscuro .campo textarea {
  background: var(--navy); border-color: var(--navy-40); color: var(--hielo);
}
.campo.malo input, .campo.malo select, .campo.malo textarea { border-color: var(--error); }
.campo .error { font-size: var(--t-micro); color: var(--error); font-weight: 500; }

/* Aviso general de formulario */
.aviso {
  display: flex; gap: var(--r3); align-items: flex-start;
  padding: var(--r3) var(--r4); border-radius: var(--curva);
  font-size: var(--t-menor); margin-bottom: var(--r4);
  border: 1px solid transparent;
}
.aviso.malo   { background: rgba(217,97,76,.10);  border-color: rgba(217,97,76,.35); color: #8F3626; }
.aviso.bien   { background: rgba(139,195,74,.12); border-color: rgba(139,195,74,.40); color: #4C7220; }
.aviso.neutro { background: rgba(0,21,36,.04);    border-color: rgba(0,21,36,.12);   color: var(--tinta-suave); }
.oscuro .aviso.neutro { background: rgba(255,255,255,.05); border-color: var(--navy-60); color: var(--hielo-suave); }
.oscuro .aviso.malo   { color: #F0A392; }

/* =====================================================================
   Tablas — en móvil se convierten en fichas apiladas
   ===================================================================== */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-menor); }
.tabla th {
  text-align: left; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .12em; color: var(--tinta-tenue); font-weight: 600;
  padding: var(--r3) var(--r4); border-bottom: 1px solid rgba(0,21,36,.12);
}
.tabla td { padding: var(--r4); border-bottom: 1px solid rgba(0,21,36,.08); vertical-align: middle; }
.oscuro .tabla th { color: var(--hielo-apaga); border-bottom-color: var(--navy-60); }
.oscuro .tabla td { border-bottom-color: var(--navy-60); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  .tabla.apila thead { display: none; }
  .tabla.apila tr {
    display: block; padding: var(--r4) 0;
    border-bottom: 1px solid rgba(0,21,36,.10);
  }
  .oscuro .tabla.apila tr { border-bottom-color: var(--navy-60); }
  .tabla.apila td {
    display: grid; grid-template-columns: 40% 1fr; gap: var(--r3);
    padding: 4px 0; border: 0;
  }
  .tabla.apila td::before {
    content: attr(data-rotulo);
    font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em;
    color: var(--tinta-tenue); font-weight: 600;
  }
  .oscuro .tabla.apila td::before { color: var(--hielo-apaga); }
  .tabla.apila .num { text-align: left; }
}

/* =====================================================================
   Precio
   ===================================================================== */
.precio { display: flex; align-items: baseline; gap: 6px; }
.precio .cifra {
  font-family: var(--tit); font-weight: 700;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); letter-spacing: -.02em;
}
.precio .moneda { font-size: var(--t-menor); color: var(--tinta-tenue); font-weight: 600; }
.oscuro .precio .moneda { color: var(--hielo-apaga); }

/* =====================================================================
   htmx — retroalimentación mientras vuela la petición
   ===================================================================== */
.htmx-indicator { opacity: 0; transition: opacity var(--transicion); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .oculta-al-cargar { opacity: .4; pointer-events: none; }

.girador {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,21,36,.18); border-top-color: var(--verde);
  animation: gira .7s linear infinite;
}
.oscuro .girador { border-color: rgba(255,255,255,.2); border-top-color: var(--verde); }
@keyframes gira { to { transform: rotate(360deg); } }

/* Cuando no hay nada que mostrar, decirlo bien */
.vacio { text-align: center; padding: var(--r8) var(--r5); color: var(--tinta-tenue); }
.oscuro .vacio { color: var(--hielo-apaga); }
.vacio h3 { color: var(--tinta); margin-bottom: var(--r2); }
.oscuro .vacio h3 { color: var(--hielo); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   CUESTIONARIO DE CONSULTA
   Hasta 29 preguntas en una pantalla. Lo que las hace legibles es el aire
   entre ellas y que cada bloque de opciones se lea como una unidad.
   ===================================================================== */

.seccion-cuestionario { margin-top: var(--r8); }

.cuestionario {
  background: var(--blanco);
  border: 1px solid rgba(0,21,36,.10);
  border-radius: var(--r5);
  padding: clamp(var(--r5), 3vw, var(--r7));
  margin-bottom: var(--r5);
}

.cuestionario .campo { margin-bottom: 0; }

.cuestionario .titulo-bloque {
  font-size: var(--t-h3);
  margin-top: var(--r4);
  padding-bottom: var(--r3);
  border-bottom: 1px solid rgba(0,21,36,.10);
}

.separador-campo {
  border: 0; border-top: 1px solid rgba(0,21,36,.08); margin: var(--r3) 0;
}

.obligatorio { color: var(--error); font-weight: 700; margin-left: 2px; }

/* Grupos de opciones: fieldset sin el marco feo del navegador */
.grupo-opciones { border: 0; padding: 0; margin: 0; }

.grupo-opciones legend {
  font-size: var(--t-menor); font-weight: 500;
  padding: 0; margin-bottom: var(--r3);
}

/* Las opciones se acomodan en rejilla: en escritorio caben dos o tres por
   fila, y una lista de siete enfermedades deja de ser una columna infinita. */
.grupo-opciones .opciones {
  display: grid; gap: var(--r2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.grupo-opciones .opcion {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r3) var(--r4);
  border: 1px solid rgba(0,21,36,.16);
  border-radius: var(--r3);
  cursor: pointer;
  font-size: var(--t-menor); font-weight: 400; line-height: 1.35;
  transition: border-color var(--transicion), background var(--transicion);
}

.grupo-opciones .opcion:hover { border-color: rgba(0,21,36,.34); background: rgba(0,21,36,.02); }

/* :has da el resaltado de lo elegido sin JavaScript. Donde no exista,
   el control marcado se ve igual: solo se pierde el fondo. */
.grupo-opciones .opcion:has(input:checked) {
  border-color: var(--verde);
  background: rgba(139,195,74,.10);
  font-weight: 500;
}

.grupo-opciones .opcion:has(input:focus-visible) {
  outline: 2px solid var(--verde); outline-offset: 2px;
}

/* IMPRESCINDIBLE. Arriba, `.campo input` da min-height:48px, width:100% y
   borde redondeado a TODO input dentro de un .campo. Un fieldset de opciones
   también es .campo, así que sin este reinicio cada radio se dibuja como un
   campo de texto gigante con el círculo al centro y la etiqueta expulsada
   fuera de la caja. Se restaura el control nativo. */
.grupo-opciones .opcion input[type="radio"],
.grupo-opciones .opcion input[type="checkbox"] {
  flex: none;
  width: 19px; height: 19px; min-height: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none;
  box-shadow: none;
  appearance: auto; -webkit-appearance: auto;
  accent-color: var(--verde-hondo);
  cursor: pointer;
}

.grupo-opciones .opcion span { flex: 1; }

/* Subida de foto. El ejemplo va al lado del control, no debajo: se mira la
   postura y se elige el archivo en el mismo golpe de vista. */
.campo-archivo {
  padding: var(--r4);
  border: 1px dashed rgba(0,21,36,.22);
  border-radius: var(--r3);
  background: rgba(0,21,36,.02);
}

.archivo-fila {
  display: flex; gap: var(--r4); align-items: flex-start; flex-wrap: wrap;
}

.archivo-ejemplo { margin: 0; flex: none; width: 150px; }

.archivo-ejemplo img {
  width: 100%; height: auto;
  border-radius: var(--r2);
  border: 1px solid rgba(0,21,36,.12);
}

.archivo-ejemplo figcaption { margin-top: var(--r1); text-align: center; }

.archivo-control { flex: 1 1 240px; min-width: 0; }

/* El input de archivo también hereda el min-height:48px de .campo input.
   Aquí estorba: el botón nativo queda flotando en una caja vacía. */
.campo-archivo input[type="file"] {
  min-height: 0; width: 100%;
  padding: var(--r3);
  background: var(--blanco);
  border: 1px solid rgba(0,21,36,.22);
  border-radius: var(--r3);
  font-size: var(--t-menor);
  cursor: pointer;
}

.campo-archivo input[type="file"]::file-selector-button {
  margin-right: var(--r3);
  padding: 6px var(--r4);
  border: 0; border-radius: var(--pildora);
  background: var(--navy); color: var(--blanco);
  font-size: var(--t-micro); font-weight: 600;
  cursor: pointer;
}

.campo-archivo input[type="file"]::file-selector-button:hover { background: var(--navy-60); }

/* Foto ya guardada, en el expediente */
.adjunto-foto { display: inline-block; max-width: 220px; }

.adjunto-foto img {
  width: 100%; height: auto;
  border-radius: var(--r3);
  border: 1px solid rgba(0,21,36,.14);
}

.adjunto-foto:hover img { border-color: var(--verde); }

.aviso-previo {
  align-items: flex-start;
  padding: var(--r3) var(--r4);
  border-radius: var(--r3);
  background: rgba(139,195,74,.12);
  border: 1px solid rgba(139,195,74,.40);
  color: #4C7220;
}

.aviso-previo svg { flex: none; margin-top: 2px; }

.error-formulario {
  padding: var(--r3) var(--r4);
  border-radius: var(--r3);
  background: rgba(217,97,76,.10);
  border: 1px solid rgba(217,97,76,.35);
  color: #8F3626;
  font-size: var(--t-menor);
  margin-bottom: var(--r4);
}

.nota-privacidad { display: flex; align-items: center; gap: var(--r2); }

/* =====================================================================
   EXPEDIENTE — el cuestionario ya contestado, en solo lectura
   ===================================================================== */

.lista-datos { display: grid; gap: var(--r3); margin: 0; }

.lista-datos dt {
  font-size: var(--t-micro); color: var(--tinta-tenue);
  text-transform: none; letter-spacing: 0;
}

.lista-datos dd { margin: 2px 0 0; font-size: var(--t-menor); font-weight: 500; }

.lista-datos.compacta { gap: var(--r2); }

.valores-varios { margin: 0; padding-left: var(--r4); font-weight: 400; }

.expediente-encabezado { align-items: flex-start; }

.tarjeta-enlace { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.tarjeta-enlace:hover { border-color: rgba(0,21,36,.28); box-shadow: var(--sombra); }

/* =====================================================================
   REDES SOCIALES
   ===================================================================== */

/* Los glifos de marca ya tienen forma propia y reconocible. Meterlos en un
   círculo con contorno los encoge y los aplana a todos por igual: se leen
   como una fila de botones grises, no como Instagram, Facebook y YouTube.
   Van sueltos, más grandes, y cada uno toma su color de marca al pasar. */
.redes { display: flex; gap: var(--r4); flex-wrap: wrap; align-items: center; }

.redes a {
  display: inline-flex;
  color: var(--tinta-suave);
  opacity: .75;
  transition: opacity var(--transicion), color var(--transicion), transform var(--transicion);
}

.redes a svg { display: block; width: 21px; height: 21px; }

.redes a:hover { opacity: 1; transform: translateY(-2px); }

/* Colores oficiales de cada marca */
.redes a.red-ig:hover { color: #FF0069; }
.redes a.red-fb:hover { color: #0866FF; }
.redes a.red-yt:hover { color: #FF0000; }
.redes a.red-wa:hover { color: #25D366; }

/* El pie es de superficie clara (--crema), así que hereda el tono del pie.
   La superficie oscura del área de miembros sí necesita el suyo. */
.oscuro .redes a, .navy .redes a { color: var(--hielo-suave); }

/* El pie pone display:block y padding a todos sus enlaces; en la fila de
   iconos eso desalinea los glifos con el texto de la arroba. */
.pie .redes a { padding-block: 0; }

/* =====================================================================
   WHATSAPP FLOTANTE
   Solo lo ve quien no tiene sesión. Abre con una casilla, sin JavaScript.
   ===================================================================== */

.wa-flotante {
  position: fixed; right: var(--r5); bottom: var(--r5);
  z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--r3);
}

.wa-burbuja {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: var(--sombra-alta);
  cursor: pointer;
  transition: transform .15s ease;
}

.wa-burbuja:hover { transform: scale(1.06); }

/* Blanco sobre verde #25D366: es la presentación oficial de la marca. */
.wa-burbuja svg { width: 30px; height: 30px; }

.wa-tarjeta {
  position: relative;
  display: flex; flex-direction: column; gap: var(--r3);
  width: min(300px, calc(100vw - var(--r6)));
  padding: var(--r5);
  background: var(--blanco);
  border: 1px solid rgba(0,21,36,.10);
  border-radius: var(--r5);
  box-shadow: var(--sombra-alta);

  /* Cerrada por omisión. Se abre sola una vez, pasados unos segundos:
     lo justo para que no tape la página nada más entrar. */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  animation: wa-asoma .3s ease 7s forwards;
}

/* Marcada la casilla, la tarjeta está abierta a propósito: la animación
   de asomarse ya no manda. */
#wa-abierto:checked ~ .wa-tarjeta {
  opacity: 1; visibility: visible; transform: none;
  animation: none;
}

@keyframes wa-asoma {
  to { opacity: 1; visibility: visible; transform: none; }
}

/* Quien pidió menos movimiento no recibe la apertura automática. */
@media (prefers-reduced-motion: reduce) {
  .wa-tarjeta { animation: none; transition: none; }
}

/* Cerrada a mano: no vuelve a asomarse sola en toda la visita.
   La clase la pone ns.js al leer lo que se guardó. */
.wa-flotante.wa-callada .wa-tarjeta { animation: none; }

.wa-cerrar {
  position: absolute; top: var(--r3); right: var(--r3);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--tinta-tenue); cursor: pointer;
}

.wa-cerrar:hover { background: rgba(0,21,36,.06); color: var(--tinta); }

.wa-boton {
  background: #25D366; border-color: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
}

.wa-boton svg { width: 17px; height: 17px; flex: none; }

.wa-boton:hover { background: #1FB855; border-color: #1FB855; }

@media (max-width: 480px) {
  .wa-flotante { right: var(--r4); bottom: var(--r4); }
}

/* Adjunto de un expediente. No es un enlace: las imágenes migradas siguen en
   el WordPress viejo, así que se nombra el archivo y se dice dónde está. */
.adjunto {
  display: inline-flex; align-items: center; gap: var(--r2);
  padding: 4px var(--r3);
  border: 1px dashed rgba(0,21,36,.22);
  border-radius: var(--r2);
  font-size: var(--t-menor);
  color: var(--tinta-suave);
  word-break: break-all;
}

.adjunto svg { flex: none; }
.adjunto em { font-style: normal; }

/* Barra de moneda de la ficha. Va sobre las dos columnas y fuera del
   formulario de compra: un <form> dentro de otro es HTML inválido. */
.barra-moneda { margin-bottom: var(--r5); }

/* Marca de precio convertido. Discreta pero visible: la cifra es una
   referencia del día, no un precio de lista. */
.precio .aprox {
  font-size: .55em; color: var(--tinta-tenue); font-weight: 500;
  margin-right: 2px; vertical-align: middle;
}
.oscuro .precio .aprox { color: var(--hielo-apaga); }