/* ===== tokens.css ===== */
/* ================= Camelie — tokens de marca =================
   La paleta, las tipografías y la retícula. Nada más: ni un selector.

   Este archivo lo cargan LOS DOS paquetes, el del sitio y el del panel. Es a
   propósito: la paleta se cambia aquí, una vez, y se repintan las dos
   superficies a la vez. El panel estuvo aislado en grises justo por miedo a
   ese repintado; compartir este archivo es lo que lo hizo gratis.

   Esta es la paleta DEFINITIVA, la de la maqueta del diseñador
   (cameliemockupfishcardfaf0f8.html, 11 de septiembre de 2026). La anterior
   era de paso y era más oscura: el vino era casi negro y el burdeos más
   hondo. Al aclararse las dos superficies oscuras, todo lo que iba escrito
   encima perdió contraste de golpe, y por eso ahora los claros sobre oscuro
   tienen sus propios tokens en vez de estar escritos a mano en seis hojas.

   Regla al editar: aquí solo van valores. Si aparece una llave con selector,
   está en el archivo equivocado.
   ============================================================= */

:root{
  color-scheme: light;
  /* Type system
     Principal ......... Archivo — 400, 500, 600, 700 + cursiva 400
     Secundaria/mono ... IBM Plex Mono — 400, 500 (cifras y datos)
     No usar pesos fuera de esa lista: el navegador los sintetiza y se ven sucios. */
  --font-grotesk:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;

  /* Paleta de marca
     Burdeos y rosa son los dos colores de la marca. El rosa sobre fondo claro
     da 1,59:1, así que ahí no se usa nunca: el destaque en claro va en
     burdeos, que da 6,63:1 sobre blanco. El rosa es para las superficies
     oscuras —6,34:1 sobre el vino—. Sobre el burdeos se queda en 4,18:1, o
     sea que ahí solo vale para texto grande y para adornos. */
  /* Retícula: 12 columnas y unidad base de 8px. Con el medianil en 16px, tres o
     cuatro columnas iguales caen exactamente sobre las líneas de las 12. */
  --cols:12;               --medianil:1rem;       --u:8px;
  --foco:var(--burdeos);
  --vino:#6D2C42;          --vino-2:#823A52;      --vino-line:#9E516B;
  --burdeos:#B22422;       --burdeos-deep:#7B1D0C;
  /* Un escalon por encima del burdeos, para el hover de un boton solido.
     No es color de estado: es el mismo burdeos con mas luz. */
  --burdeos-alto:#A12C14;
  /* La tinta del logotipo, del archivo del diseñador (`CAMELIE LOGO.png` y
     `LOGO 1.png` son exactamente este valor). NO es el --burdeos y no hay que
     cuadrarlos: son dos piezas distintas de la misma entrega. El --burdeos es
     el color de acción —botones, enlaces, el subrayado del menú— y tiene que
     saltar a la vista; esta es la tinta con la que se imprime la flor, y a
     30 px lee casi como negro, que es justo lo que se le pide a un logo al
     lado del nombre. Da 17,4:1 sobre el papel.

     Vive aquí y no dentro de `bin/construir-marca.php` porque las ocho piezas
     de la marca se generan leyendo esta línea. Cambiarla y correr el generador
     las repinta todas; escribirla en el PHP habría sido meter un color de
     identidad en el peor sitio donde buscarlo. */
  --marca:#3C0019;
  --rosa:#F6BDDD;          --rosa-tenue:#FCEDF5;
  /* El mismo rosa, cuatro puntos de luz más claro, y solo para escribir sobre
     el burdeos: ahí el --rosa se queda en 4,18:1 y este llega a 4,56. Va aquí
     y no suelto en una regla para que el día que cambie el rosa se vea que
     este también hay que moverlo. Se usa una sola vez, en .guar. */
  --rosa-sobre-burdeos:#F8C9E3;
  /* La tarjeta de la espina de pescado. Es un rosa propio, mas frio que el
     --rosa-tenue, y va aparte porque no es el mismo papel que el resto. */
  --rosa-tarjeta:#FAF0F8;
  --teal:#007B78;          --teal-soft:#EDF5F4;
  --cream:#FFF9E8;
  --ink:#2B1D17;           --ink-soft:#726560;    --ink-mute:#7C706C;
  --paper:#FFFFFF;       --mist:#FAF8F4;       --mist-2:#F6F3EA;
  --line:#EDE7DD;        --line-soft:#F4F0E7;
  /* Filete estructural: cuando la regla es la única separación entre dos bloques
     tiene que llegar a 3:1. Este llega justo: 3,00:1 sobre el mist y 3,19:1
     sobre el blanco. El --line se queda en 1,16:1 y solo sirve de adorno dentro
     de una caja que ya separa por su cuenta. */
  --line-fuerte:#9A8E87;

  /* Los dos parches del texto sobre fondo oscuro.

     Los trece tintes que el sitio escribe encima del vino son cremas y grises
     CÁLIDOS, tono 10-22 grados, y se quedan tal cual: son los de la maqueta y
     quince de sus veinticuatro usos siguen pasando WCAG AA con la paleta
     nueva. Solo fallaron nueve, casi todos en el pie, que va sobre el vino-2
     —el fondo más claro de los tres— y que llegó a tener texto en 2,88:1.

     Estos dos los sustituyen. Van en el MISMO tono y la MISMA saturación que
     el color que reemplazan: lo único que sube es la luz, lo justo para
     cruzar 4,5:1. Un tono distinto —por ejemplo el del propio vino— se nota a
     simple vista aunque el contraste cuadre, y aquí eso sería cambiar el
     diseño en vez de arreglarlo.

     --rotulo-oscuro  rótulos y líneas pequeñas: .crumbs, .head-stats dt,
                      .proc-hint, .step-when, .proc-foot y casi todo el pie.
                      Sustituye a #B79F9A, #C7B1AD, #AE9893, #A8918C y
                      #D3BDB9, que sobre el vino-2 estaban entre 2,88 y 4,39.
                      Los cinco convergían: sobre un fondo de 37% de luz el
                      techo es 7,85:1 y no caben cinco grises por encima de
                      4,5. Medido: 5,98 sobre el vino y 4,67 sobre el pie.
     --apoyo-burdeos  los párrafos de la sección de garantía, que van sobre el
                      burdeos y no sobre el vino. Sustituye a #DECCC9, que ahí
                      se quedaba en 4,29 —y en 4,22 dentro de las tarjetas de
                      .glist, que llevan un velo de crema al 6% encima—.
                      Medido: 5,05 sobre el burdeos y 4,60 con el velo. */
  --rotulo-oscuro:#D5C4C0;
  --apoyo-burdeos:#EADEDD;

  /* Bulma se carga de CDN y trae su turquesa y su azul de fábrica. El puente
     con Bulma —sus variables, que también cubren tipografía y radios— vive en
     custom.css y no aquí, para no partirlo en dos archivos. Ahí es donde
     hsl(1,68%,42%) repite este burdeos. */

  /* El ámbar de aviso: «esto funciona, pero mira esto antes de fiarte».
     Vivía solo en admin.css, donde nació. Sube aquí porque el sitio también lo
     necesita —la calculadora de plazos avisa con él cuando le falta el
     calendario de un año— y tener el mismo amarillo escrito en dos hojas es
     exactamente lo que este archivo existe para evitar.

     No es color de identidad y no puede parecerlo: el burdeos es la marca y el
     --error es el rojo de que algo se rompió. Este se separa de los dos por
     tono. Sobre el papel da 7,04:1. */
  --ojo:#8A5A00;           --ojo-line:#DFC48C;    --ojo-bg:#FDF8EC;

  /* Superficies oscuras planas (sin degradados): la estructura la dan filetes y reglas */
  --hairline:inset 0 0 0 1px rgba(255,255,255,.09);

  /* Curva única para todo el sitio: arranca rápido y frena suave */
  --ease:cubic-bezier(.4,0,.2,1);

  --maxw:1160px;
  /* La sombra se queda en el pardo casi negro de la paleta anterior a
     propósito: una sombra es ausencia de luz, no un color de marca, y el vino
     nuevo es demasiado claro para hacer de sombra. */
  --shadow:0 20px 50px -30px rgba(42,15,14,.4);
  --shadow-sm:0 10px 30px -22px rgba(42,15,14,.34);
}

/* ===== glifo.css ===== */
/* ============================================================
   LA CAMELIA
   ============================================================

   El símbolo lo pone `glifo()` en app/ayudas.php, una sola vez, y esta hoja le
   da la forma. Entra en los dos paquetes —el del sitio y el del panel— por la
   misma razón que tokens.css: lo que se cambie aquí cambia en las dos
   superficies a la vez y sin buscar nada.

   Aquí había tres reglas de color, de cuando el símbolo era un SVG dibujado a
   mano que heredaba `currentColor`. Ya no: el símbolo es el archivo del
   diseñador y el color viene dentro del PNG, en `--marca` o en blanco, según
   el tono que pida `glifo()`. Las dos piezas las genera
   `bin/construir-marca.php` leyendo `--marca` de tokens.css, así que el color
   sigue viviendo en un solo sitio —solo que ahora el sitio es el generador, no
   esta hoja—.

   Lo único que hace falta decir aquí es que la flor NO es cuadrada: mide un
   15% más de ancho que de alto. Cada sitio donde aparece le fija el ALTO y el
   ancho sale solo. Fijar los dos la aplasta, que es lo que pasaba cuando estas
   reglas venían de un SVG con `viewBox="0 0 40 40"`. */

.glyph{display:block;flex:none;width:auto;max-width:none}

/* En el pie y en la banda oscura la flor va en blanco puro, y el blanco puro
   sobre el vino canta un poco de más al lado de un texto que va en --rotulo-oscuro.
   Un punto de transparencia la asienta sin cambiarle el color ni pedir un
   tercer archivo. */
.glyph-claro{opacity:.92}

/* ===== custom.css ===== */
/* ================= Camelie — custom layer over Bulma =================
   La paleta, las tipografías y la retícula se mudaron a tokens.css, que se
   carga antes que esta hoja y que también carga el administrador. Aquí queda
   solo lo que es de Bulma: traducir esos tokens al vocabulario de variables
   que Bulma sabe leer.
   ===================================================================== */

:root{
  --bulma-family-primary:var(--font-grotesk);
  --bulma-family-secondary:var(--font-grotesk);
  /* hsl(1,68%,42%) es el --burdeos de la paleta definitiva. Antes decia 31%,
     que era el burdeos anterior. */
  --bulma-primary-h:1;      --bulma-primary-s:68%;  --bulma-primary-l:42%;
  --bulma-link-h:1;         --bulma-link-s:68%;     --bulma-link-l:42%;
  /* De esos tres Bulma no deriva el color del enlace, sino uno mucho mas claro
     —con 31% salia hsl(1,68%,73%)—, pensado para sus propios fondos. En blanco
     eso da 2,43:1, y era lo que pintaba los enlaces que ninguna regla nuestra
     toca: los del cuerpo de un articulo o de una ficha. Con 42% habria salido
     aun mas palido, asi que el color va escrito y no derivado. */
  --bulma-link-text:var(--burdeos);
  --bulma-link-text-hover:var(--burdeos-deep);
  --bulma-link-text-active:var(--burdeos-deep);
  --bulma-radius:9px;       --bulma-radius-large:14px;   --bulma-radius-small:6px;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--bulma-family-primary);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.title,h1,h2,h3,h4,.is-display{font-family:var(--bulma-family-secondary);font-weight:600;
  text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);line-height:1.22;text-wrap:balance}
/* Los títulos chicos sí necesitan cuerpo y algo de aire entre letras para leerse en caja alta */
h3,h4{font-weight:700;letter-spacing:.015em}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
strong{color:inherit}
::selection{background:var(--rosa);color:var(--vino)}
/* Bulma declara `a:focus-visible,button:focus-visible` (0,1,1) y le gana a un
   `:focus-visible` suelto (0,1,0): el anillo del sitio nunca alcanzaba a los
   enlaces ni a los botones, y en las zonas oscuras quedaba el de Bulma, derivado
   del burdeos, en 1,87:1 sobre el vino. Igualamos especificidad y lo declaramos
   completo. */
:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:5px}
/* Sobre burdeos oscuro el anillo burdeos queda en 1,87:1; el rosa llega a 10,8:1. */
.hero,.page-head,.ctaband,.ft,.proc-card,.plan,.ab-honest{--foco:var(--rosa)}
.section{padding:clamp(3.6rem,2.2rem + 5vw,6.2rem) 1.25rem}
.shell{width:min(100% - 0rem,var(--maxw));margin-inline:auto}

/* ---- eyebrow / labels ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--bulma-family-secondary);
  font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.19em;color:var(--burdeos)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--burdeos);opacity:.6}
.eyebrow.light{color:var(--rosa)}
.eyebrow.light::before{background:var(--rosa)}
.eyebrow.teal{color:var(--teal)}
.eyebrow.teal::before{background:var(--teal)}
.sec-head{max-width:60ch}
.sec-head .h{font-size:clamp(1.8rem,1.25rem + 2.1vw,2.7rem);margin-top:.85rem}
.sec-head .h em{font-style:normal;color:var(--burdeos)}
.sec-head p{margin-top:.9rem;color:var(--ink-soft);font-size:1.05rem;max-width:56ch}
.center{margin-inline:auto;text-align:center}
.center p{margin-inline:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;cursor:pointer;
  font-family:var(--bulma-family-primary);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:999px;border:1.6px solid transparent;min-height:48px;
  transition:transform .18s ease,box-shadow .25s ease,background .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--burdeos);color:#fff;box-shadow:0 12px 26px -14px rgba(134,28,26,.75)}
.btn-primary:hover{background:var(--burdeos-deep);transform:translateY(-2px)}
.btn-dark{background:var(--vino);color:#fff}
.btn-dark:hover{background:var(--vino-2);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--burdeos);color:var(--burdeos);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:#ffffff3a}
.btn-ghost:hover{border-color:var(--rosa);color:#fff;transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1eb958;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ================= NAVBAR ================= */
.nav{position:sticky;top:0;z-index:60;background:#ffffffe8;backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav .shell{display:flex;align-items:center;gap:1.4rem;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:-.01em}
/* Solo el alto: la flor no es cuadrada y el ancho lo saca de su proporción.
   Los 30 px son los que la dejan de la altura de la mayúscula del nombre que
   va al lado, que es donde una y otra se leen como una sola pieza. */
.brand .glyph{height:30px;flex:none}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em}
.nav-links a{color:var(--ink-soft);transition:color .2s;padding:.3rem 0}
.nav-links a:hover{color:var(--burdeos)}
.nav-links a .soon{font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--burdeos);vertical-align:super;margin-left:.12rem;font-weight:700}
.nav-cta{margin-left:.3rem}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;width:46px;height:46px;color:var(--ink);cursor:pointer}
@media (max-width:900px){.nav-links,.nav-cta{display:none}.burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:.2rem;background:#fff;border-bottom:1px solid var(--line);padding:.8rem 1.25rem}
  .nav-links.open a{padding:.7rem 0}}

/* ================= HERO ================= */
.hero{position:relative;background:var(--vino);color:#F3E9E1;overflow:hidden;isolation:isolate;padding-inline:1.25rem}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--vino)}
/* Sin `aspect-ratio`: la flor del logo es un 15% mas ancha que alta, y
   cuadrarla la aplastaria. Se le fija el ancho y el alto sale solo. */
.bloom-wrap{position:absolute;top:-6%;right:-14%;width:clamp(560px,52vw,780px);z-index:-1;
  pointer-events:none;opacity:.2;filter:drop-shadow(0 0 70px rgba(134,28,26,.38))}
/* La opacidad bajo de .72 a .2 al cambiar el dibujo: lo que habia antes era un
   trazado de lineas casi sin relleno, y esto es una silueta llena. Al .72 de
   antes se comia el hero entero. El color ya viene dentro del PNG —lo pone
   bin/construir-marca.php leyendo --rosa de tokens.css—, asi que sigue
   viviendo en un solo sitio. */
.bloom{display:block;width:100%;height:auto;animation:bloomspin 120s linear infinite}
@keyframes bloomspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bloom{animation:none}}
.hero .shell{position:relative;padding-block:clamp(2.6rem,1.5rem + 3.6vw,4.2rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(350px,.82fr);
  gap:clamp(2rem,.6rem + 3.4vw,4.4rem);align-items:center}
.hero-content{position:relative}
/* La flor va DENTRO del texto, como una letra mas, y por eso esto no es una
   caja flexible: siendolo, la flor seria una columna aparte y «marcas», al
   caer al segundo renglon, se metia debajo del nombre en vez de volver al
   margen. En linea, el segundo renglon arranca pegado a la izquierda, justo
   debajo de la flor, que es como esta armado el logotipo. */
.hero h1{font-size:clamp(1.85rem,1rem + 2.6vw,3.2rem);
  color:var(--rosa);margin-top:.75rem;line-height:1.15}
.hero h1 em{font-style:normal;color:var(--cream)}
/* Del alto de una mayuscula y un pelo mas: la flor acompaña al nombre, no lo
   tapa. Se probo a 1.75em —la proporcion literal de `lockup.png`— y al lado de
   un texto de 51 px la flor de 90 px se comia el titulo. Va en `em` para que
   crezca con la letra y la pieza se vea igual en cualquier pantalla.

   El `display` no sobra: la clase `.glyph` —la misma flor de la barra y del
   pie— las pone en bloque, y un bloque metido dentro de una linea se lleva un
   renglon entero para el solo, dejando el nombre debajo. */
.hero h1 .h1-flor{display:inline-block;height:.78em;width:auto;
  margin:0 .3em -.02em 0;vertical-align:baseline}
/* La flor y «Camelie» son una sola pieza y no se separan nunca: el corte de
   linea del titulo esta escrito en la vista, entre esta pieza y «marcas». */
.hero h1 .h1-nombre{white-space:nowrap}
.hero .sub{margin-top:1.1rem;color:#E7D6CD;font-size:clamp(1rem,.95rem + .3vw,1.09rem);max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem}
.hero-note{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.35rem;color:#EBD8CC;font-size:.86rem;
  background:#ffffff0d;border:1px solid #ffffff26;border-radius:999px;padding:.5rem 1rem}
.hero-note svg{width:17px;height:17px;color:var(--rosa);flex:none}

/* ---- hero lead card ---- */
.hero-card{position:relative;background:var(--paper);color:var(--ink);border-radius:16px;
  padding:1.7rem 1.6rem 1.5rem;box-shadow:0 34px 70px -34px rgba(0,0,0,.7),0 0 0 1px #ffffff1a}
.hero-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:16px 16px 0 0;
  background:var(--burdeos)}
.hc-k{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--burdeos);background:var(--rosa-tenue);border-radius:999px;padding:.36rem .7rem}
.hero-card h2{font-size:1.22rem;line-height:1.3;margin-top:.8rem}
.hc-lead{margin-top:.5rem;color:var(--ink-soft);font-size:.9rem;line-height:1.7}
.hc-form{margin-top:1.2rem;display:grid;gap:.7rem}
.hc-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.fld>span{display:block;font-family:var(--bulma-family-secondary);font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-mute);margin-bottom:.34rem}
.fld input{width:100%;font-family:inherit;font-size:.94rem;color:var(--ink);background:var(--mist);
  border:1px solid var(--line);border-radius:10px;padding:.68rem .8rem;transition:border-color .18s,background .18s;appearance:none}
.fld input::placeholder{color:var(--ink-mute)}
.fld input:focus{outline:none;border-color:var(--burdeos);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb, var(--burdeos) 12.16%, transparent)}

/* ---- select propio (el <option> nativo no se puede estilizar) ---- */
.sel{position:relative}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;
  font-family:inherit;font-size:.94rem;line-height:1.4;color:var(--ink);text-align:left;background:var(--mist);
  border:1px solid var(--line);border-radius:10px;padding:.68rem .8rem;cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s}
.sel-btn:hover{border-color:#DCCFC9}
.sel-btn:focus-visible{outline:none;border-color:var(--burdeos);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb, var(--burdeos) 12.16%, transparent)}
.sel.open .sel-btn{border-color:var(--burdeos);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb, var(--burdeos) 12.16%, transparent)}
.sel-caret{width:16px;height:16px;flex:none;color:var(--ink-soft);transition:transform .2s,color .2s}
.sel.open .sel-caret{transform:rotate(180deg);color:var(--burdeos)}
.sel-list{position:absolute;z-index:40;top:calc(100% + .4rem);left:0;right:0;margin:0;padding:.35rem;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 48px -20px rgba(42,15,14,.45),0 2px 8px -4px rgba(42,15,14,.2);
  max-height:250px;overflow:auto;overscroll-behavior:contain;animation:selin .14s ease-out}
@keyframes selin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sel-list{animation:none}}
.sel-opt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .6rem;
  border-radius:8px;font-size:.92rem;line-height:1.3;color:var(--ink);cursor:pointer}
.sel-opt+.sel-opt{margin-top:1px}
.sel-opt.active{background:var(--mist)}
.sel-opt[aria-selected=true]{color:var(--burdeos);font-weight:600;background:var(--rosa-tenue)}
.sel-opt[aria-selected=true]::after{content:"";width:15px;height:15px;flex:none;background:var(--burdeos);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.sel-list::-webkit-scrollbar{width:8px}
.sel-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid #fff}
.hc-submit{width:100%;justify-content:center;margin-top:.25rem}
.hc-note{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.75rem;color:var(--ink-mute);margin-top:.1rem}
.hc-note svg{width:14px;height:14px;color:var(--teal);flex:none}

/* ficha band — replaces stat card + trust strip */
.ficha{position:relative;margin-top:clamp(2.2rem,1.2rem + 2.6vw,3.4rem);border-top:1px solid #ffffff26;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#ffffff1e}
.ficha .f{background:var(--vino);padding:1.4rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.12rem}
.ficha .f .l{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--rosa)}
.ficha .f .n{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;font-size:1.55rem;line-height:1.25;margin-top:.25rem}
.ficha .f .d{font-size:.82rem;color:#CBB8B4;margin-top:.1rem}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-card{max-width:520px}
  /* En movil la flor queda DEBAJO del texto, no a un lado: por eso baja a .12,
     mientras que en escritorio el texto la esquiva y aguanta .2. */
  .bloom-wrap{top:4%;right:-40%;width:min(92%,560px);opacity:.12}
}
/* Cinco huecos en una fila dejan de caber como a 880px: ahi «3 clases», «10
   años» y «< 24 h» parten el numero en dos lineas, que es lo unico que una
   cinta de cifras no puede hacer. Se baja a dos columnas antes de llegar.

   Y la quinta ficha ocupa la fila entera. Cinco en una rejilla de dos dejan un
   hueco al final, y aqui un hueco no es un margen: el fondo de la rejilla es el
   filete claro, asi que la celda que falta se ve como una mancha. */
@media (max-width:900px){
  .ficha{grid-template-columns:repeat(2,1fr)}
  .ficha .f:last-child{grid-column:1/-1}
}
@media (max-width:640px){.hc-row{grid-template-columns:1fr}}
@media (max-width:380px){.ficha{grid-template-columns:1fr}}

/* ================= SERVICIO — espina de pescado ================= */
.svc{background:var(--mist)}
.fish-wrap{margin-top:clamp(3rem,2rem + 2vw,4.2rem)}
.fish{position:relative;list-style:none;margin:0;padding:0;counter-reset:fish;
  display:grid;grid-template-columns:repeat(6,1fr);column-gap:1rem;min-height:600px}
/* la espina */
.fish::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--line);transform:translateY(-50%)}
.fish-item{position:relative;counter-increment:fish}

/* nodo sobre la espina */
.fish-node{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--line);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:.8rem;color:var(--burdeos);
  letter-spacing:-.02em;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.fish-node::before{content:counter(fish,decimal-leading-zero)}

/* la raspa que une el nodo con la tarjeta */
.fish-bone{position:absolute;left:50%;width:2px;height:26px;background:var(--line);z-index:1;
  transform:translateX(-50%);transition:background .25s}
.fish-item.up .fish-bone{bottom:calc(50% + 22px)}
.fish-item.down .fish-bone{top:calc(50% + 22px)}

/* tarjeta anclada a la espina: crece alejándose de ella, sin mover a las vecinas */
.fish-card{position:absolute;left:50%;transform:translateX(-50%);width:100%;z-index:2;
  background:var(--rosa-tarjeta);border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.05rem;
  transition:width .3s ease,box-shadow .28s,border-color .25s,opacity .28s}
.fish-item.up .fish-card{bottom:calc(50% + 48px)}
.fish-item.down .fish-card{top:calc(50% + 48px)}
.fish-card .ic{width:44px;height:44px;border-radius:12px;background:var(--rosa-tenue);display:grid;place-items:center;
  color:var(--burdeos);transition:background .25s,color .25s,box-shadow .25s}
.fish-card .ic svg{width:22px;height:22px}
.fish-card h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.95rem;margin-top:.75rem}

/* el detalle, dentro de la misma tarjeta */
.fish-more{max-height:0;overflow:hidden;opacity:0;visibility:hidden;margin-top:0;cursor:default;
  transition:max-height .34s ease,opacity .26s ease,margin .34s ease,visibility .34s}
.fish-more p{font-size:.86rem;color:var(--ink-soft);line-height:1.7;margin:0;
  padding-top:.85rem;border-top:1px solid var(--line)}
.fish-more .btn{margin-top:.95rem;width:100%;font-size:.78rem;padding:.55rem .9rem}

/* ---- abierto ---- */
@media (hover:hover){
  .fish-item:hover .fish-card{width:320px;box-shadow:var(--shadow);border-color:transparent;z-index:6}
  .fish-item:hover .fish-more{max-height:320px;opacity:1;visibility:visible;margin-top:.2rem}
  .fish-item:hover .fish-node{background:var(--burdeos);color:#fff;border-color:var(--burdeos);
    box-shadow:0 10px 22px -10px rgba(134,28,26,.8)}
  .fish-item:hover .fish-bone{background:var(--burdeos)}
  .fish-item:hover .ic{background:var(--burdeos);color:#fff}
  .fish:hover .fish-item:not(:hover) .fish-card{opacity:.4}
  .fish:hover .fish-item:not(:hover) .fish-node{opacity:.5}
}
.fish-item.is-open .fish-card{width:320px;box-shadow:var(--shadow);border-color:transparent;z-index:6}
.fish-item.is-open .fish-more{max-height:320px;opacity:1;visibility:visible;margin-top:.2rem}
.fish-item.is-open .fish-node{background:var(--burdeos);color:#fff;border-color:var(--burdeos);
  box-shadow:0 10px 22px -10px rgba(134,28,26,.8)}
.fish-item.is-open .fish-bone{background:var(--burdeos)}
.fish-item.is-open .ic{background:var(--burdeos);color:#fff}
.fish.has-open .fish-item:not(.is-open) .fish-card{opacity:.4}
.fish.has-open .fish-item:not(.is-open) .fish-node{opacity:.5}

/* en los extremos la tarjeta ancha se saldría del contenedor: se ancla al borde */
.fish-item:first-child .fish-card{left:0;transform:none}
.fish-item:last-child .fish-card{left:auto;right:0;transform:none}

@media (prefers-reduced-motion:reduce){.fish-card,.fish-more{transition-duration:.01ms}}

/* Bajo 900px la espina se pone vertical: el fishbone no cabe y el timeline se lee mejor en columna. */
@media (max-width:900px){
  .fish{grid-template-columns:1fr;min-height:0;row-gap:.85rem;padding-left:3.4rem}
  .fish::before{left:1.25rem;right:auto;top:.5rem;bottom:.5rem;width:2px;height:auto;transform:none}
  .fish-bone{display:none}
  .fish-node{left:-2.15rem;top:1.6rem;transform:none}
  .fish-card{position:static;transform:none;width:auto;padding:1.2rem 1.25rem}
  .fish-item.up .fish-card,.fish-item.down .fish-card{inset:auto}
  .fish-item:first-child .fish-card,.fish-item:last-child .fish-card{left:auto;right:auto}
  .fish-item:hover .fish-card,.fish-item.is-open .fish-card{width:auto}
  .fish-card h3{font-size:1.02rem}
}

/* ================= PROCESO — expediente por etapas ================= */
.proc{background:var(--paper)}
.proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);align-items:center}
.proc-card{background:var(--vino);color:#EFE1D8;border-radius:16px;padding:2rem;
  box-shadow:var(--shadow),var(--hairline);position:relative;overflow:hidden}
.proc-head .k{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--rosa)}
.proc-card h3{color:var(--rosa);font-size:1.28rem;margin:.4rem 0 0}
.proc-hint{font-size:.78rem;color:var(--rotulo-oscuro);margin-top:.45rem}

/* Lista de etapas: reglas finas y numerales, sin círculos ni halos.
   Cada cabecera es un <button> real: teclado y lectores de pantalla salen gratis. */
.steps{list-style:none;margin:1.5rem 0 0;padding:0}
/* las reglas llegan al borde de la tarjeta: lectura de índice, no de tarjetitas */
.step{position:relative;margin-inline:-2rem;padding-inline:2rem;border-top:1px solid #ffffff1c;
  transition:background .25s}
.step:last-child{border-bottom:1px solid #ffffff1c}
.step.is-open{background:#ffffff08}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rosa);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.step.is-open::before{transform:scaleY(1)}
.step-head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.9rem;
  width:100%;background:none;border:0;padding:1.05rem 0;text-align:left;color:inherit;
  font-family:inherit;cursor:pointer}
.step-head:focus-visible{outline:2px solid var(--rosa);outline-offset:3px;border-radius:4px}
.step-n{font-family:var(--font-mono);font-size:1.05rem;letter-spacing:-.03em;color:var(--rosa);
  font-variant-numeric:tabular-nums;opacity:.45;transition:opacity .25s}
.step.is-open .step-n{opacity:1}
.step-t{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.015em;color:#fff;transition:color .25s}
.step.is-open .step-t{color:var(--rosa)}
.step-when{font-family:var(--font-mono);font-size:.72rem;color:var(--rotulo-oscuro);white-space:nowrap;letter-spacing:-.01em}
.step-chev{width:15px;height:15px;color:var(--rosa);opacity:.55;transition:transform .3s var(--ease),opacity .25s}
.step.is-open .step-chev{transform:rotate(180deg);opacity:1}
.step-head:hover .step-t{color:var(--rosa)}
.step-head:hover .step-n{opacity:.85}
.step:not(.is-open):hover{background:#ffffff05}

/* grid-template-rows 0fr->1fr interpola la altura real: la curva se siente pareja
   y deja de depender de adivinar un max-height. */
.step-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.step-body>div{overflow:hidden;min-height:0}
.step.is-open .step-body{grid-template-rows:1fr}
/* el contenido entra escalonado, no de golpe */
.step-body p,.step-pay{opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .38s var(--ease)}
.step.is-open .step-body p{opacity:1;transform:none;transition-delay:.1s}
.step.is-open .step-pay{opacity:1;transform:none;transition-delay:.18s}
.step-body p{font-size:.9rem;color:#D7C4BC;line-height:1.7;margin:0}
.step-pay{display:inline-flex;align-items:baseline;gap:.55rem;margin:.9rem 0 1.2rem;
  background:#ffffff0f;border:1px solid #ffffff22;border-radius:8px;padding:.42rem .7rem}
.step-pay span{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--rosa)}
.step-pay b{font-family:var(--font-mono);font-weight:500;font-size:.8rem;color:#fff;letter-spacing:-.01em}
.proc-foot{margin-top:1.2rem;font-size:.74rem;color:var(--rotulo-oscuro);line-height:1.6}
@media (prefers-reduced-motion:reduce){
  .step-body,.step::before,.step-chev,.step-body p,.step-pay{transition-duration:.01ms;transition-delay:0s}
  .step-body p,.step-pay{transform:none}
}

.proc-right .h{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);margin-top:.85rem}
.proc-right .h em{font-style:normal;color:var(--burdeos)}
.proc-right p{color:var(--ink-soft);margin-top:.9rem}
.check{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.75rem}
.check li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem}
.check li svg{width:20px;height:20px;color:var(--burdeos);flex:none;margin-top:2px}
@media (max-width:860px){.proc-grid{grid-template-columns:1fr}.proc-card{padding:1.6rem}
  .step{margin-inline:-1.6rem;padding-inline:1.6rem}}
@media (max-width:520px){
  .step-head{grid-template-columns:auto 1fr auto;row-gap:.3rem}
  .step-when{grid-column:2 / -1;grid-row:2}
  /* el rótulo apretaba el valor contra el borde: se apilan */
  .step-pay{flex-direction:column;align-items:flex-start;gap:.2rem}
}

/* ================= RISKS ================= */
.risks{background:var(--mist)}
.risk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.8rem}
.risk{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;
  transition:transform .2s,box-shadow .25s,border-color .2s}
.risk:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--rosa)}
.risk .ic{width:44px;height:44px;border-radius:11px;background:var(--rosa-tenue);display:grid;place-items:center;color:var(--burdeos)}
.risk .ic svg{width:22px;height:22px}
.risk h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.02rem}
.risk p{font-size:.92rem;color:var(--ink-soft)}
@media (max-width:900px){.risk-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.risk-grid{grid-template-columns:1fr}}

/* ================= OFERTA ================= */
/* El precio anterior tachado. Sale solo cuando el panel tiene un «precio
   anterior» mayor que el honorario (ver hay_oferta() en app/ayudas.php).

   Está en tres sitios y en los tres sobre vino, así que no hay ni un color
   nuevo: los tres hexadecimales de abajo son los que ya usan el renglón de
   apoyo de cada uno de esos bloques, y los tres están medidos contra vino en
   bd/contraste.php. No se usa opacidad para apagarlo —que es lo que pide el
   dedo— porque un contraste rebajado por `opacity` no lo ve esa auditoría.

   El tamaño se fija en `em` para que el tachado quede en ~14 px en los tres,
   aunque el precio de al lado vaya de 24 px a 56 px. Ahí está el punto: la
   cifra vieja tiene que leerse, no competir. */
.antes{font-weight:400;font-size:.6em;letter-spacing:0;margin-right:.45em;
  text-decoration-thickness:.075em}
.plan .amt .antes{font-size:.34em;color:#E3D1CD}   /* el mismo del .amt small */
.ficha .f .n .antes{color:#CBB8B4}                 /* el mismo del .ficha .f .d */
.head-stats dd .antes{color:#C0AAA5}               /* el mismo del .head-stats span */

/* ================= PRICING ================= */
.pricing{background:var(--paper)}
.price-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:1.3rem;margin-top:2.8rem;align-items:stretch}
.plan{background:var(--vino);color:#EFE1D8;border-radius:16px;padding:2.1rem;position:relative;overflow:hidden;
  box-shadow:var(--shadow),var(--hairline)}
/* Dos tiras en versalitas, una al lado de otra y con permiso para bajar de
   línea: «HONORARIO CAMELIE» más un nombre de oferta no caben juntos en un
   móvil, y sin el flex la segunda caía pegada a la primera. */
.plan .plan-k{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem}
.plan .tag{position:relative;font-family:var(--bulma-family-secondary);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--rosa)}
/* La píldora de la oferta: rosa lleno con el vino de la marca encima. Es lo
   único de la tarjeta que invierte el color, y por eso se lee como una
   etiqueta pegada y no como otro renglón más del plan. */
.plan .tag-of{position:relative;background:var(--rosa);color:var(--marca);border-radius:999px;
  padding:.22rem .62rem;font-family:var(--bulma-family-secondary);font-weight:700;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;line-height:1.35}
.plan .amt{position:relative;font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:clamp(2.6rem,1.9rem + 2.8vw,3.5rem);color:var(--rosa);line-height:1;margin:.6rem 0 .2rem}
.plan .amt small{display:block;font-size:.9rem;font-weight:600;color:#E3D1CD;margin-top:.5rem;
  font-family:var(--bulma-family-primary);letter-spacing:normal}  /* el -.03em del monto se hereda en px y se comía los espacios */
.plan ul{position:relative;list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.72rem}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:#F0E2D8}
.plan li svg{width:19px;height:19px;color:var(--rosa);flex:none;margin-top:2px}
.plan .btn{position:relative;margin-top:1.8rem;width:100%}
.excl{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:2rem}
.excl h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:.55rem}
.excl h3 svg{width:20px;height:20px;color:var(--burdeos)}
.excl>p{font-size:.9rem;color:var(--ink-soft);margin-top:.5rem}
.excl ul{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.9rem}
.excl li{display:flex;gap:.7rem;align-items:flex-start;padding-bottom:.9rem;border-bottom:1px dashed var(--line)}
.excl li:last-child{border-bottom:none;padding-bottom:0}
.excl li .ic{width:34px;height:34px;border-radius:9px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--burdeos)}
.excl li .ic svg{width:17px;height:17px}
.excl li b{font-family:var(--bulma-family-secondary);font-weight:700;display:block;font-size:.93rem;text-transform:uppercase;letter-spacing:.015em}
.excl li .d{font-size:.86rem;color:var(--ink-soft)}
@media (max-width:820px){.price-grid{grid-template-columns:1fr}}

/* ================= PAYMENT TIMELINE ================= */
.paycal{background:var(--mist)}
.pay-layout{display:grid;grid-template-columns:minmax(270px,.82fr) 1.18fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:start}
.pay-intro{position:sticky;top:96px}
.pay-intro .h{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);margin-top:.85rem}
.pay-intro .h em{font-style:normal;color:var(--burdeos)}
.pay-intro>p{color:var(--ink-soft);margin-top:.9rem;max-width:40ch}
.legend{list-style:none;padding:0;margin:1.7rem 0 0;display:grid;gap:.65rem}
.legend li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--ink-soft)}
.legend .dot{width:11px;height:11px;border-radius:3px;flex:none}
.legend .dot.camelie{background:var(--burdeos)}
.legend .dot.inapi{background:#9C918F}
.legend .dot.diario{background:var(--teal)}
.legend b{color:var(--ink);font-family:var(--bulma-family-secondary);font-weight:700}
.pay-note{margin-top:1.5rem;padding:.85rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  font-size:.82rem;color:var(--ink-soft);display:flex;gap:.55rem;align-items:flex-start}
.pay-note svg{width:16px;height:16px;color:var(--burdeos);flex:none;margin-top:3px}

/* aviso de alcance: qué cubren estos valores */
.pay-scope{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 1rem;padding:.8rem 1rem;
  background:var(--rosa-tenue);border:1px solid #E9D2E2;border-radius:10px;
  font-size:.84rem;line-height:1.6;color:var(--ink-soft)}
.pay-scope svg{width:16px;height:16px;color:var(--burdeos);flex:none;margin-top:3px}
.pay-scope b{color:var(--ink);font-weight:700}

/* Los tres momentos: acordeón. Cerrado muestra cuándo y cuánto; abierto, el desglose. */
.moments{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.moment{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .3s var(--ease)}
.moment.is-open{border-color:transparent;box-shadow:var(--shadow-sm)}
.moment::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--burdeos);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:1}
.moment:last-child::before{background:var(--teal)}
.moment.is-open::before{transform:scaleX(1)}
.moment-head{transition:background .25s var(--ease)}
.moment:not(.is-open) .moment-head:hover{background:#FBF8F6}
.moment-head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;
  width:100%;background:none;border:0;padding:1.05rem 1.3rem;text-align:left;color:inherit;
  font-family:inherit;cursor:pointer}
.moment-head:focus-visible{outline:2px solid var(--burdeos);outline-offset:-3px;border-radius:12px}
.moment-n{font-family:var(--font-mono);font-size:1.05rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--burdeos);opacity:.45;transition:opacity .25s}
.moment.is-open .moment-n{opacity:1}
.moment-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.moment-when{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.64rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--burdeos)}
.moment:last-child .moment-when{color:var(--teal)}
.moment-t{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.015em;color:var(--ink);line-height:1.25}
.moment-sum{font-family:var(--font-mono);font-weight:500;font-size:.86rem;letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap}
.moment-chev{width:15px;height:15px;color:var(--burdeos);opacity:.55;transition:transform .3s var(--ease),opacity .25s}
.moment.is-open .moment-chev{transform:rotate(180deg);opacity:1}
.moment-head:hover .moment-n{opacity:.8}

.moment-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.moment-body>div{overflow:hidden;min-height:0;padding-inline:1.3rem}  /* el horizontal no suma alto */
.moment.is-open .moment-body{grid-template-rows:1fr}
/* las líneas del desglose entran una tras otra */
.moment .pay-row,.moment-note{opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .38s var(--ease)}
.moment.is-open .pay-row{opacity:1;transform:none}
.moment.is-open .pay-row:nth-child(1){transition-delay:.09s}
.moment.is-open .pay-row:nth-child(2){transition-delay:.15s}
.moment.is-open .pay-row:nth-child(3){transition-delay:.21s}
.moment.is-open .moment-note{opacity:1;transform:none;transition-delay:.26s}
.moment-note{font-size:.82rem;color:var(--ink-mute);line-height:1.65;margin:.9rem 0 1.25rem;
  padding-top:.85rem;border-top:1px dashed var(--line)}

.pay-items{list-style:none;padding:0;margin:0;display:grid}
.pay-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.9rem;
  padding:.72rem 0;border-top:1px dashed var(--line)}
.pay-row:first-child{border-top:1px solid var(--line);padding-top:.9rem}
.pay-row .lbl{font-weight:600;color:var(--ink);font-size:.95rem}
.pay-row .who{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;
  padding:.22rem .5rem;border-radius:6px;white-space:nowrap}
.who.camelie{background:var(--rosa-tenue);color:var(--burdeos)}
.who.inapi,.who.prov{background:#EFE6E4;color:#6C6260}
.who.diario{background:var(--teal-soft);color:var(--teal)}
.pay-row .val{font-family:var(--font-mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;font-size:.92rem}
.pay-row .val.mut{color:var(--ink-mute);font-weight:400;font-size:.8rem;text-transform:uppercase;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){
  .moment-body,.moment-chev,.moment::before,.pay-row,.moment-note{transition-duration:.01ms;transition-delay:0s}
  .pay-row,.moment-note{transform:none}
}

@media (max-width:860px){.pay-layout{grid-template-columns:1fr}.pay-intro{position:static}}
/* En móvil una tabla de tres columnas no cabe: cada línea pasa a tarjeta de dos filas
   y el resumen del encabezado baja bajo el título. */
@media (max-width:620px){
  .moment-head{grid-template-columns:auto 1fr auto;column-gap:.8rem;row-gap:.45rem;padding:.95rem 1.05rem}
  .moment-sum{grid-column:2 / -1;grid-row:2;white-space:normal}
  .moment-t{font-size:.95rem}
  .moment-body>div{padding-inline:1.05rem}
  .pay-row{grid-template-columns:1fr auto;column-gap:.7rem;row-gap:.4rem;padding:.85rem 0;align-items:center}
  .pay-row .lbl{grid-column:1 / -1;grid-row:1}
  .pay-row .who{grid-column:1;grid-row:2;justify-self:start}
  .pay-row .val{grid-column:2;grid-row:2;justify-self:end;text-align:right;white-space:normal}
}

/* ================= GARANTÍA — mapa conceptual ================= */
/* Burdeos y no vino: la banda del CTA que va justo debajo ya es vino y las dos
   se fundirian. Con el burdeos nuevo, que es mas claro, el techo bajo: el
   blanco da 6,63:1 donde antes daba 9,57.
   El rotulo sigue siendo rosa, pero un escalon mas claro: el --rosa de marca
   se queda aqui en 4,18:1 y este llega a 4,56. Son cuatro puntos de luz de
   diferencia, o sea el mismo rosa; cambiarlo de color —a crema, por ejemplo—
   se ve, y perder el rosa en la seccion del compromiso no vale la pena por
   tres centesimas. Es el UNICO sitio donde el rosa no va tal cual. */
.guar{background:var(--burdeos);color:#F1E4DC;position:relative;overflow:hidden;isolation:isolate}
.guar .eyebrow.light{color:var(--rosa-sobre-burdeos)}
.guar .eyebrow.light::before{background:var(--rosa-sobre-burdeos)}
.guar::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--burdeos)}
.guar-seal-bg{position:absolute;top:-70px;right:-60px;width:360px;height:360px;opacity:.06;z-index:-1;pointer-events:none;transform:rotate(-8deg)}
.guar h2{color:#fff;font-size:clamp(1.8rem,1.25rem + 2.1vw,2.6rem)}
.guar .sub{color:var(--apoyo-burdeos);margin-top:1rem;max-width:46ch}

/* Trazado: tronco desde el nodo raíz -> espina vertical -> un brazo con punta a cada rama.
   Todo con pseudo-elementos: no hay SVG que recalcular al cambiar de tamaño. */
/* El trazado son curvas SVG calculadas desde la posición real de cada nodo:
   se redibujan al cambiar el tamaño y no se deforman como un viewBox fijo. */
.cmap{--calle:clamp(3.2rem,1.6rem + 4.4vw,6.5rem);--hilo:rgba(255,242,222,.5);
  position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--calle);align-items:center}
.cmap-core,.cmap-branches{position:relative;z-index:1}
.cmap-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.cmap-wires .wire{fill:none;stroke:var(--hilo);stroke-width:2;stroke-linecap:round}
.cmap-wires .head{fill:var(--cream);transform-box:fill-box;transform-origin:center}
.cmap-wires .origen{fill:var(--burdeos);stroke:var(--cream);stroke-width:2;transform-box:fill-box;transform-origin:center}
/* El estado final es el natural: todo visible. El JS "arma" el estado oculto justo
   antes de animar y lo desarma al terminar, así ningún fallo deja el bloque en blanco. */
.cmap.is-armed .wire{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.cmap.is-armed .head,.cmap.is-armed .origen{opacity:0}
.cmap.is-armed .glist li{opacity:0;transform:translateX(14px)}
.cmap.is-armed.is-drawn .wire{animation:cmapTrazo .9s var(--ease) forwards;animation-delay:var(--d)}
.cmap.is-armed.is-drawn .head{animation:cmapPunta .35s var(--ease) forwards;animation-delay:calc(var(--d) + .72s)}
.cmap.is-armed.is-drawn .origen{animation:cmapPunta .4s var(--ease) forwards}
.cmap.is-armed.is-drawn .glist li{animation:cmapRama .55s var(--ease) forwards;animation-delay:calc(var(--d) + .5s)}
@keyframes cmapTrazo{to{stroke-dashoffset:0}}
@keyframes cmapPunta{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes cmapRama{to{opacity:1;transform:none}}

.glist{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-auto-rows:1fr}
.glist li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.05rem;align-items:start;
  background:rgba(255,242,222,.06);border:1px solid rgba(255,242,222,.2);border-radius:14px;padding:1.3rem 1.4rem;
  transition:transform .25s var(--ease),border-color .25s,background .25s}
.glist li:hover{border-color:rgba(255,242,222,.55);background:rgba(255,242,222,.12)}
.glist .ic{width:48px;height:48px;border-radius:12px;background:var(--cream);display:grid;place-items:center;flex:none;color:var(--burdeos);box-shadow:0 10px 20px -10px rgba(0,0,0,.55)}
.glist .ic svg{width:24px;height:24px}
.glist h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.04rem;color:#fff}
/* el tick va en el flujo del texto, si no queda huérfano en su propia línea */
.glist h3 .tick{display:inline-block;color:var(--rosa);margin-left:.4rem;vertical-align:-2px}
.glist h3 .tick svg{width:15px;height:15px;display:block}
/* Aqui va el paso 1 y no el 2, aunque sea un parrafo de apoyo: la tarjeta
   lleva encima del burdeos un velo de crema al 6%, y eso aclara el fondo lo
   justo para que el paso 2 se quede en 4,22:1. Medido en el navegador, no
   calculado: el velo no se ve en la hoja. */
.glist p{font-size:.93rem;color:var(--apoyo-burdeos);margin-top:.3rem}


/* En columna el mapa se endereza: espina a la izquierda y flechas apuntando a cada rama. */
@media (max-width:900px){
  .cmap{grid-template-columns:1fr;gap:2.4rem}
  .cmap-branches{padding-left:3.6rem}  /* aire para que la curva respire */
  .glist{grid-auto-rows:auto}
  .cmap.is-armed .glist li{transform:translateY(12px)}
}
@media (max-width:520px){
  .cmap-branches{padding-left:2.9rem}
  .glist li{padding:1.1rem 1.1rem}
}

/* ================= CTA BANNER ================= */
.ctaband{background:var(--vino);color:#F1E4DC;position:relative;overflow:hidden;isolation:isolate}
.ctaband::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--vino)}
.ctaband .shell{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.ctaband h2{color:var(--rosa);font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);max-width:20ch}
.ctaband p{color:#DECCC9;margin-top:.6rem;max-width:44ch}
.ctaband .acts{display:flex;gap:.8rem;flex-wrap:wrap}
/* Un `btn-outline` hereda el `--ink` del texto normal y sobre el vino queda en
   1,1:1: el botón se ve vacío. La banda oscura le da su propio color, con el
   filete en 3,3:1, que es el mínimo para un elemento que no es texto. */
.ctaband .btn-outline{color:#fff;border-color:#ffffff5c}
.ctaband .btn-outline:hover{border-color:var(--rosa);color:var(--rosa)}

/* ================= ABOUT (boutique) ================= */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.8rem,1rem + 4vw,3.6rem);align-items:center}
/* El hueco de abajo es para la tarjeta «1 a 1», que va absoluta y por tanto no
   empuja nada: sin él, `place-items:center` centra el logotipo en el panel
   entero y la palabra CAMELIE queda debajo de la tarjeta —medido: 12 px de
   solape—. Con la flor suelta que había antes no pasaba porque terminaba 40 px
   más arriba. Son los 78 px de alto de la tarjeta más su 1,2rem de separación,
   redondeado a 6rem para que sobre aire. Si algún día la tarjeta pasa a dos
   líneas, este número hay que volver a medirlo. */
.portrait{position:relative;border-radius:16px;overflow:hidden;background:var(--vino);
  min-height:340px;padding-bottom:6rem;display:grid;place-items:center;
  box-shadow:var(--shadow),var(--hairline)}
/* El logotipo completo, no la flor suelta: este panel es el retrato de la
   marca. Se le fija el ancho y el alto sale de su proporción. El .9 de opacidad
   viene de cuando aquí había un símbolo dibujado a mano y se queda: asienta el
   blanco puro sobre el vino sin cambiarle el tono. */
.portrait .mono-glyph{display:block;width:clamp(120px,42%,170px);height:auto;opacity:.9}
.portrait .badge{position:absolute;left:1.2rem;bottom:1.2rem;background:#fff;color:var(--ink);border-radius:12px;padding:.8rem 1.1rem;box-shadow:var(--shadow-sm)}
.portrait .badge b{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.5rem;color:var(--burdeos);display:block;line-height:1}
.portrait .badge span{font-size:.76rem;color:var(--ink-soft)}
.about-right .h{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);margin-top:.85rem}
.about-right .h em{font-style:normal;color:var(--burdeos)}
.about-right p{color:var(--ink-soft);margin-top:.9rem}
.about-points{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1rem}
.about-points li{display:flex;gap:.8rem;align-items:flex-start}
.about-points .ic{width:40px;height:40px;border-radius:10px;background:var(--mist);display:grid;place-items:center;flex:none;color:var(--burdeos)}
.about-points .ic svg{width:20px;height:20px}
.about-points b{font-family:var(--bulma-family-secondary);font-weight:700;display:block;font-size:.95rem;text-transform:uppercase;letter-spacing:.015em}
.about-points p{font-size:.9rem;margin-top:.1rem}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}

/* ================= RESOURCES / BLOG ================= */
.res{background:var(--mist)}
.res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
/* Mientras haya menos de tres articulos publicados la fila deja huecos y la
   seccion se ve a medio hacer. Se baja el numero de columnas al de fichas y
   se ata el ancho: la tarjeta crece, pero no se convierte en un cartel.
   Cada `:has()` va en su propia regla: uno no soportado invalidaria la lista
   entera y se llevaria por delante a la otra. */
.res-grid:has(.res-card:only-child){grid-template-columns:minmax(0,560px)}
.res-grid:has(.res-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.res-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .25s}
.res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.res-card .thumb{height:120px;background:var(--vino);display:grid;place-items:center;color:#ffffff8f}
.res-card .thumb svg{width:40px;height:40px}
.res-card .bd{padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.res-card .cat{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--burdeos)}
.res-card h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1rem;line-height:1.4}
.res-card h3 a{color:var(--ink);transition:color .2s}
.res-card:hover h3 a{color:var(--burdeos)}
.res-card p{font-size:.9rem;color:var(--ink-soft)}
.res-card .thumb{transition:filter .25s}
.res-card:hover .thumb{filter:saturate(1.12) brightness(1.05)}
.res-card .meta{margin-top:auto;padding-top:.4rem;font-family:var(--bulma-family-secondary);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute);display:inline-flex;align-items:center;gap:.45rem}
.res-card .meta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--burdeos);flex:none}
@media (max-width:820px){.res-grid{grid-template-columns:1fr}}

/* ================= CONTACT ================= */
.contact{background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,1rem + 4vw,3.6rem)}
.contact .h{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);margin-top:.85rem}
.contact .h em{font-style:normal;color:var(--burdeos)}
.contact-lead{color:var(--ink-soft);margin-top:.9rem;max-width:44ch}
.ct-list{list-style:none;padding:0;margin:1.9rem 0 0;display:grid;gap:1rem}
.ct-list li{display:flex;gap:.9rem;align-items:center}
.ct-list .ic{width:46px;height:46px;border-radius:11px;background:var(--mist);display:grid;place-items:center;color:var(--burdeos);flex:none}
.ct-list .ic svg{width:20px;height:20px}
.ct-list b{font-family:var(--bulma-family-secondary);font-weight:700;display:block;font-size:.93rem;text-transform:uppercase;letter-spacing:.015em}
.ct-list span{color:var(--ink-soft);font-size:.9rem}
.cform{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:1.8rem;display:grid;gap:1rem;box-shadow:var(--shadow-sm)}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-mute)}  /* mismo rótulo que la tarjeta del hero */
.field input,.field textarea{font-family:inherit;font-size:.96rem;color:var(--ink);background:var(--paper);border:1.4px solid var(--line);border-radius:9px;padding:.8rem .9rem;width:100%;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--burdeos);box-shadow:0 0 0 3px rgba(134,28,26,.13)}
.field textarea{resize:vertical;min-height:104px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cform .btn{width:100%;margin-top:.2rem}
.form-note{font-size:.78rem;color:var(--ink-mute);display:flex;gap:.5rem;align-items:flex-start}
.form-note svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--burdeos)}
.form-note a{color:var(--burdeos);text-decoration:underline;text-underline-offset:2px}
.form-ok{display:none;background:var(--teal-soft);border:1px solid var(--teal);border-radius:9px;padding:.8rem;color:var(--teal);font-weight:600;font-size:.9rem;align-items:center;gap:.6rem}
.form-ok.show{display:flex}
.form-ok svg{width:18px;height:18px;flex:none}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

/* ================= FOOTER ================= */
.ft{background:var(--vino-2);color:#E4D5D2;padding:3rem 1.25rem 1.6rem}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.ft .brand{color:#fff;margin-bottom:.9rem}
.ft p{font-size:.9rem;color:var(--rotulo-oscuro);max-width:32ch}
.ft h4{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--rosa);margin-bottom:1rem}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.ft ul a{font-size:.92rem;color:var(--rotulo-oscuro);transition:color .2s}
.ft ul a:hover{color:#fff}
.ft-tools{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid #ffffff1a;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.ft-tools .lbl{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--rotulo-oscuro)}
.ft-tools a{font-size:.86rem;color:#E4D5D2;background:#ffffff10;border:1px solid #ffffff1f;border-radius:999px;padding:.35rem .85rem;transition:background .2s}
.ft-tools a:hover{background:#ffffff1f}
.ft-bottom{margin-top:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--rotulo-oscuro)}
.ft-bottom a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ft-bottom a:hover{color:#E4D5D2}
@media (max-width:760px){.ft-grid{grid-template-columns:1fr 1fr}.ft-grid>div:first-child{grid-column:1/-1}}
@media (max-width:460px){.ft-grid{grid-template-columns:1fr}}

/* ================= WhatsApp float =================
   Los colores de este bloque son los de WhatsApp y no los del sitio, a
   propósito: la ventanita tiene que reconocerse como WhatsApp antes de
   leerse. Van todos juntos arriba, con nombre, para que se vea de un vistazo
   que son prestados y que ninguno se ha colado en la paleta de Camelie.
   El auditor de colores los cuenta como tintes, no como identidad. */
.wa-caja{
  --wa-verde:#25D366; --wa-verde-hover:#1EB955; --wa-cab:#075E54;
  --wa-fondo:#ECE5DD; --wa-barra:#F0F2F5; --wa-tinta:#111B21; --wa-gris:#667781;
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* -------- el botón -------- */
.wa{position:relative;width:58px;height:58px;border-radius:50%;background:var(--wa-verde);color:#fff;
  display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);border:none;cursor:pointer;transition:transform .2s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px;height:30px}
/* El auricular se pinta del color del fondo sobre el globo relleno: es como
   está hecho el logo y es lo que lo distingue de un bocadillo cualquiera. */
.wa .wa-fono{fill:var(--wa-verde)}
.wa .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:wapulse 2.4s ease-out infinite}
@keyframes wapulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa .pulse{display:none}}

/* -------- la ventana --------
   Nace `hidden` desde el PHP y la abre el JS. Sin JS no aparece nunca y el
   botón sigue siendo el enlace de siempre. */
.wa-panel{width:min(330px,calc(100vw - 40px));border-radius:14px;overflow:hidden;
  background:var(--wa-fondo);box-shadow:0 26px 54px -20px rgba(11,20,26,.55);
  display:flex;flex-direction:column;transform-origin:bottom right}
.wa-panel[hidden]{display:none}
.wa-caja.is-open .wa-panel{animation:wa-entra .18s var(--ease, ease) both}
@keyframes wa-entra{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wa-caja.is-open .wa-panel{animation:none}}

.wa-cab{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;
  background:var(--wa-cab);color:#fff}
.wa-foto{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--wa-verde)}
.wa-foto svg{width:26px;height:26px}
.wa-foto .wa-fono{fill:#fff}
.wa-quien{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.wa-quien strong{font-size:.95rem;font-weight:600}
.wa-quien span{font-size:.74rem;color:#D7E0DD}
/* 40px de lado en un botón secundario: por debajo de los 44 del mínimo, pero
   con la ventana abierta también cierran la tecla Escape y el clic fuera. */
.wa-cerrar{margin-left:auto;margin-right:-2px;flex:none;width:40px;height:40px;
  display:grid;place-items:center;border:none;border-radius:50%;
  background:transparent;color:#fff;opacity:.85;cursor:pointer}
.wa-cerrar:hover{background:rgba(255,255,255,.15);opacity:1}
.wa-cerrar svg{width:16px;height:16px}

.wa-chat{padding:18px 14px 16px;min-height:104px}
/* El bocadillo recibido: blanco, esquina superior izquierda en pico y la hora
   metida dentro, abajo a la derecha, como en la aplicación. */
.wa-globo{position:relative;max-width:90%;margin:0;padding:8px 12px 20px;
  background:#fff;color:var(--wa-tinta);border-radius:0 8px 8px 8px;
  font-size:.88rem;line-height:1.5;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.wa-globo::before{content:"";position:absolute;top:0;left:-7px;
  border:7px solid transparent;border-right:0;border-top-color:#fff}
.wa-hora{position:absolute;right:10px;bottom:6px;font-size:.66rem;color:var(--wa-gris)}

.wa-escribir{display:flex;align-items:flex-end;gap:8px;padding:8px;background:var(--wa-barra)}
.wa-escribir textarea{flex:1;min-width:0;max-height:96px;resize:none;
  padding:11px 14px;border:none;border-radius:20px;background:#fff;color:var(--wa-tinta);
  font:inherit;font-size:.88rem;line-height:1.4}
.wa-escribir textarea::placeholder{color:var(--wa-gris)}
.wa-escribir textarea:focus-visible{outline:2px solid var(--wa-verde);outline-offset:0}
.wa-enviar{flex:none;width:44px;height:44px;border-radius:50%;border:none;
  background:var(--wa-verde);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background .18s ease}
.wa-enviar:hover{background:var(--wa-verde-hover)}
.wa-enviar svg{width:19px;height:19px;margin-left:2px}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.ribbon{background:var(--burdeos);color:#fff;text-align:center;font-size:.8rem;letter-spacing:.02em;padding:.5rem 1rem;font-weight:600}

/* ===== paginas.css ===== */
/* ================= PÁGINAS INTERIORES ================= */
/* Cabecera de página: la misma superficie oscura del hero, en versión compacta */
.page-head{position:relative;background:var(--vino);color:#F3E9E1;overflow:hidden;
  padding:clamp(2.5rem,1.6rem + 3vw,4rem) 1.25rem clamp(2.5rem,1.6rem + 3vw,4rem)}
.page-head h1{color:var(--rosa);font-size:clamp(2rem,1.3rem + 2.4vw,3rem);margin-top:1rem;line-height:1.16}
.page-head>.shell>p,.ph-grid p{margin-top:1.05rem;color:#E7D6CD;max-width:58ch}
.crumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.75rem;color:var(--rotulo-oscuro);
  margin-bottom:calc(var(--u) * 3)}
.crumbs a{color:#D7C4BC;transition:color .2s}
.crumbs a:hover{color:var(--rosa)}
.crumbs b{color:var(--rosa);font-weight:600}
.crumbs span{opacity:.5}
/* ---- cabecera de página interior ----------------------------------------- */
/* Retícula estricta de 12 columnas (Swiss Modernism): el titular ocupa 1-7 y la
   bajada 9-12, con la columna 8 vacía como respiro. La asimetría es la del
   sistema, no una proporción elegida a ojo. */
.head-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  align-items:end}
.head-title{grid-column:1 / span 7}
/* La medida la da la columna: sirve igual para un titular corto que para uno largo. */
.head-title h1{margin-top:var(--u)}
/* Bajada bajo el titular, en la misma columna 1-7. Baja de tono respecto al h1
   sin llegar al cuerpo de la entradilla, que vive en la columna de la derecha:
   si midieran igual, la cabecera tendría dos entradillas y ningún titular. */
.head-title .head-sub{margin-top:calc(var(--u) * 2);color:#E7D6CD;
  font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.5;max-width:46ch}
/* El tope de medida lo tenía el `<p>` suelto de la cabecera, pero no lo heredó
   el `.head-lead` al aparecer la rejilla: en cuanto la cabecera se pliega a una
   columna, entre 700 y 900px, la entradilla corría a 119 caracteres por línea en
   las cuatro páginas que la usan. A 1440 el tope no actúa: la propia columna de
   cuatro mide menos. */
.head-lead{grid-column:9 / -1;color:#E7D6CD;font-size:1rem;line-height:1.6;max-width:58ch}
@media (max-width:860px){.head-grid{grid-template-columns:1fr;align-items:start}
  .head-title,.head-lead{grid-column:auto}
  .head-lead{margin-top:calc(var(--u) * 3)}}

/* Cifras de la cabecera, sobre la misma retícula: tres datos ocupan 4 columnas
   cada uno y cuatro datos ocupan 3, así que en ambos casos caen sobre las líneas
   de las 12. El filete va por celda, no corrido: el corte del medianil dibuja la
   retícula en vez de taparla con divisorias verticales. */
.head-stats{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  margin:calc(var(--u) * 5) 0 0}
.head-stats>div{grid-column:span 4;padding-top:var(--u);border-top:1px solid #ffffff3d}
.head-stats.cuatro>div{grid-column:span 3}
.head-stats dt{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--rotulo-oscuro)}
.head-stats dd{margin:var(--u) 0 0;font-family:var(--font-mono);font-weight:500;font-size:1.5rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--rosa);line-height:1.2}
.head-stats span{display:block;margin-top:var(--u);font-size:.875rem;color:#C0AAA5;line-height:1.6}
/* Al angostarse, seis columnas por dato y luego doce: siempre divisores de 12. */
@media (max-width:860px){.head-stats>div,.head-stats.cuatro>div{grid-column:span 6}
  .head-stats{row-gap:calc(var(--u) * 3)}}
@media (max-width:520px){.head-stats>div,.head-stats.cuatro>div{grid-column:span 12}}

.ph-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);align-items:end}
.ph-grid .hero-cta{margin-top:1.7rem}
.ph-cost{background:#ffffff0f;border:1px solid #ffffff26;border-radius:14px;padding:1.2rem 1.3rem}
.ph-cost .l{display:block;font-family:var(--bulma-family-secondary);font-weight:700;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--rosa)}
.ph-cost .n{display:block;font-family:var(--font-mono);font-weight:500;font-size:1.15rem;color:#fff;
  letter-spacing:-.02em;margin-top:.5rem;line-height:1.35}
.ph-cost .d{display:block;font-size:.82rem;color:#C0AAA5;margin-top:.45rem;line-height:1.6}
@media (max-width:820px){.ph-grid{grid-template-columns:1fr;align-items:start}}

/* ---- índice de servicios ---- */
.srv-index{background:var(--mist)}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.srv-card{position:relative;display:flex;flex-direction:column;gap:.55rem;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:1.7rem 1.5rem 1.5rem;color:var(--ink);
  transition:transform .25s var(--ease),box-shadow .28s var(--ease),border-color .25s}
.srv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;
  background:var(--burdeos);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.srv-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.srv-card:hover::before{transform:scaleX(1)}
.srv-n{position:absolute;top:1.6rem;right:1.5rem;font-family:var(--font-mono);font-size:.92rem;
  letter-spacing:-.03em;color:var(--burdeos);opacity:.5;transition:opacity .25s}
.srv-card:hover .srv-n{opacity:1}
.srv-card .ic{width:48px;height:48px;border-radius:13px;background:var(--rosa-tenue);display:grid;
  place-items:center;color:var(--burdeos);transition:background .25s,color .25s}
.srv-card:hover .ic{background:var(--burdeos);color:#fff}
.srv-card .ic svg{width:23px;height:23px}
.srv-card h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.04rem;margin-top:.3rem;padding-right:2rem}
.srv-card p{font-size:.92rem;color:var(--ink-soft)}
.srv-when{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute);letter-spacing:-.01em}
.srv-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1rem;
  font-family:var(--bulma-family-secondary);font-weight:700;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--burdeos)}
.srv-go svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.srv-card:hover .srv-go svg{transform:translateX(4px)}
@media (max-width:900px){.srv-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.srv-grid{grid-template-columns:1fr}}

.srv-cta{margin-top:1.6rem;background:var(--vino);color:#EFE1D8;border-radius:16px;padding:1.8rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;box-shadow:var(--hairline)}
.srv-cta h2{color:var(--rosa);font-size:1.24rem}
.srv-cta p{color:#D7C4BC;font-size:.93rem;margin-top:.4rem;max-width:46ch}
.srv-cta .acts{display:flex;gap:.7rem;flex-wrap:wrap}
.srv-cta .btn-outline{color:#fff;border-color:#ffffff5c}
.srv-cta .btn-outline:hover{border-color:var(--rosa);color:var(--rosa)}

/* ---- detalle del servicio ---- */
.srv-detail{background:var(--paper)}
.sd-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:clamp(2rem,1.2rem + 3vw,3.6rem);align-items:start}
/* Encabezado de sección como rótulo con filete: da ritmo sin gritar */
.sd-h{display:flex;align-items:center;gap:.9rem;font-size:.9rem;letter-spacing:.1em;
  color:var(--ink);margin-bottom:1.3rem}
.sd-h::after{content:"";flex:1;height:1px;background:var(--line)}
.sd-main .sd-h:not(:first-child){margin-top:2.9rem}

/* Listas: filetes de borde a borde y numerales monoespaciados, sin círculos.
   Las descripciones llevan clase propia: un selector `span` genérico pisaba al numeral. */
.incluye,.sd-pasos{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-soft)}
.incluye li,.sd-pasos li{display:grid;align-items:start;padding:1.05rem 0;
  border-bottom:1px solid var(--line-soft)}
.incluye li{grid-template-columns:auto 1fr;gap:.85rem}
.sd-pasos li{grid-template-columns:2.4rem 1fr;gap:.9rem}
.incluye svg{width:18px;height:18px;color:var(--burdeos);flex:none;margin-top:3px}
.sp-n{font-family:var(--font-mono);font-weight:500;font-size:.95rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--burdeos);line-height:1.42}
.incluye b,.sd-pasos b{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.97rem;
  display:block;text-transform:uppercase;letter-spacing:.015em;line-height:1.42}
.inc-d,.sp-d{display:block;margin-top:.25rem;font-size:.92rem;color:var(--ink-soft);line-height:1.7}

.faq{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  background:none;border:0;padding:1.05rem 0;text-align:left;color:var(--ink);font-family:inherit;
  font-weight:600;font-size:.98rem;cursor:pointer}
.faq-head:focus-visible{outline:2px solid var(--burdeos);outline-offset:3px;border-radius:4px}
.faq-head:hover{color:var(--burdeos)}
.faq-chev{width:16px;height:16px;color:var(--burdeos);flex:none;transition:transform .3s var(--ease)}
.faq-item.is-open .faq-head{color:var(--burdeos)}
.faq-item.is-open .faq-chev{transform:rotate(180deg)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.faq-body>div{overflow:hidden;min-height:0}
.faq-item.is-open .faq-body{grid-template-rows:1fr}
.faq-body p{font-size:.93rem;color:var(--ink-soft);line-height:1.75;margin:0 0 1.15rem;max-width:62ch}

.sd-side{position:sticky;top:96px}
.sd-box{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:1.6rem}
.sd-box .ic{width:46px;height:46px;border-radius:13px;background:var(--rosa-tenue);display:grid;
  place-items:center;color:var(--burdeos)}
.sd-box .ic svg{width:22px;height:22px}
.sd-box h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.02rem;margin-top:.85rem}
.sd-box>p{font-size:.92rem;color:var(--ink-soft);margin-top:.5rem}
.sd-box .btn{width:100%;margin-top:1.1rem;font-size:.84rem}
.sd-nota{font-size:.78rem;color:var(--ink-mute);line-height:1.65;margin-top:1rem;
  padding-top:.9rem;border-top:1px dashed var(--line)}
@media (max-width:860px){.sd-grid{grid-template-columns:1fr}.sd-side{position:static}}

/* ---- otras etapas ---- */
.srv-rel{background:var(--mist)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rel-card{position:relative;display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:1.4rem 1.3rem;color:var(--ink);
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.rel-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-sm)}
.rel-card .srv-n{top:1.3rem;right:1.3rem}
.rel-card h3{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.97rem;padding-right:2rem}
.rel-card p{font-size:.88rem;color:var(--ink-soft);margin-top:.35rem}
.rel-todo{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-family:var(--bulma-family-secondary);font-weight:700;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--burdeos)}
.rel-todo svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.rel-todo:hover svg{transform:translateX(4px)}
@media (max-width:820px){.rel-grid{grid-template-columns:1fr}}

/* ===== nosotros.css ===== */
/* ================= NOSOTROS ================= */
/* ---- manifiesto ---- */
.ab-mani{background:var(--paper)}
.ab-mani-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.8rem,1rem + 3vw,3.6rem);
  align-items:start}
/* La declaración va en cuerpo grande, no en un h2: es prosa destacada, no un título.
   La medida se fija en ch para que no pase de cinco o seis líneas al ensanchar. */
.ab-xl{font-size:clamp(1.25rem,1rem + 1.1vw,1.72rem);line-height:1.45;color:var(--ink);
  letter-spacing:-.012em;max-width:28ch;text-wrap:balance}
.ab-mani-txt p{color:var(--ink-soft);max-width:56ch}
.ab-mani-txt p+p{margin-top:1.05rem}
@media (max-width:820px){.ab-mani-grid{grid-template-columns:1fr}.ab-xl{max-width:30ch}}

/* ---- principios ---- */
/* Cuatro columnas con filete superior: el numeral marca el inicio de cada módulo. */
.ab-princ{background:var(--mist)}
.ab-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 clamp(1.1rem,.6rem + 1.6vw,2.2rem)}
.ab-item{padding-top:1.05rem;border-top:1px solid var(--line)}
.ab-item .sp-n{display:block}
.ab-item b{display:block;margin-top:.75rem;font-family:var(--bulma-family-secondary);font-weight:700;
  font-size:.97rem;text-transform:uppercase;letter-spacing:.015em;line-height:1.42;max-width:20ch}
.ab-item p{margin-top:.6rem;font-size:.92rem;color:var(--ink-soft);line-height:1.7}
@media (max-width:900px){.ab-grid{grid-template-columns:repeat(2,1fr);row-gap:2.1rem}}
@media (max-width:560px){.ab-grid{grid-template-columns:1fr;row-gap:1.8rem}.ab-item b{max-width:none}}

/* ---- el equipo ---- */
/* Con dos socias, tres fichas encogidas dejarían un tercio del ancho vacío. Cada
   ficha toma media fila (6 columnas) y se parte por dentro con `subgrid`, así que
   la foto cae en 2 columnas reales de las 12 y el texto en 4: la partición
   interna se apoya en las mismas líneas que todo lo demás de la página. */
.ab-equipo{background:var(--paper)}
.eq-intro{margin-top:calc(var(--u) * 2);color:var(--ink-soft);font-size:1rem;max-width:52ch}
.eq-grid{list-style:none;margin:calc(var(--u) * 5) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:calc(var(--u) * 5) var(--medianil)}
.eq-card{grid-column:span 6;display:grid;grid-template-columns:subgrid;align-content:start}
.eq-foto{grid-column:span 2}
.eq-txt{grid-column:span 4;display:flex;flex-direction:column;min-height:100%}

/* El contenedor ya sabe recortar una foto real: reemplazar el monograma por un
   <img> no pide tocar el CSS. */
.eq-foto{aspect-ratio:4 / 5;background:var(--vino);border-radius:4px;overflow:hidden;
  display:grid;place-items:center}
.eq-foto img{width:100%;height:100%;object-fit:cover;display:block}
.eq-mono{font-family:var(--font-mono);font-weight:500;font-size:1.75rem;letter-spacing:.06em;
  color:var(--rosa)}

.eq-rol{margin:0;font-family:var(--font-mono);font-weight:500;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--burdeos)}
/* Nombre propio en caja baja: el resto de los títulos va en versales, pero una
   persona no es un rótulo y en versales se lee peor. */
.eq-nombre{margin-top:var(--u);font-size:1.25rem;text-transform:none;letter-spacing:-.01em;
  line-height:1.25}
.eq-bio{margin-top:var(--u);font-size:1rem;line-height:1.6;color:var(--ink-soft)}

.eq-tags{list-style:none;margin:calc(var(--u) * 2) 0 calc(var(--u) * 3);padding:0;
  display:flex;flex-wrap:wrap;gap:var(--u)}
.eq-tags li{background:var(--mist);border-radius:3px;padding:6px var(--u);
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-soft);line-height:1.4}

.eq-cont{margin:auto 0 0;padding-top:calc(var(--u) * 2);border-top:1px solid var(--line);
  display:grid;gap:var(--u)}
.eq-cont>div{display:flex;align-items:baseline;gap:var(--u)}
.eq-cont dt{flex:none;min-width:58px;font-family:var(--bulma-family-secondary);font-weight:700;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.eq-cont dd{margin:0;font-size:1rem;line-height:1.5}
.eq-cont a{color:var(--burdeos);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb, var(--burdeos) 33.33%, transparent);transition:text-decoration-color .2s}
@media (hover:hover){.eq-cont a:hover{text-decoration-color:var(--burdeos)}}

/* Sin subgrid la ficha cae a una sola columna y la foto quedaría enorme: se le
   baja el formato para que siga siendo usable. */
@supports not (grid-template-columns:subgrid){
  .eq-card{grid-template-columns:1fr}
  .eq-foto,.eq-txt{grid-column:1 / -1}
  .eq-foto{aspect-ratio:3 / 2;margin-bottom:calc(var(--u) * 2)}}

/* Al pasar a fila completa hay que repartir de nuevo: con span 2 de doce la
   foto quedaba diminuta y sobraba media fila en blanco. */
@media (max-width:900px){.eq-card{grid-column:1 / -1}
  .eq-foto{grid-column:span 4}.eq-txt{grid-column:span 8}}
@media (max-width:560px){.eq-card{grid-template-columns:1fr}
  .eq-foto,.eq-txt{grid-column:1 / -1}
  .eq-foto{aspect-ratio:3 / 2;margin-bottom:calc(var(--u) * 2)}}

/* ---- lo que sí / lo que no ---- */
/* Antes eran dos tarjetas con borde y esquinas redondeadas sobre un fondo #ffffff0d
   que sobre el vino es casi invisible: la caja no separaba nada, solo decoraba.
   Ahora las dos listas se apoyan en la retícula de 12 (1-6 y 7-12) y el orden lo
   dan los filetes y la tipografía. */
.ab-honest{background:var(--vino);color:#E7D6CD;position:relative}
.ab-honest-head{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  align-items:end}
.ab-honest-head>div{grid-column:1 / span 6}
.ab-h2{color:var(--rosa);font-size:clamp(1.75rem,1.2rem + 1.9vw,2.5rem);margin-top:var(--u)}
.ab-sub{grid-column:7 / -1;margin:0;color:#D7C4BC;font-size:1rem;line-height:1.6}
@media (max-width:860px){.ab-honest-head{grid-template-columns:1fr;align-items:start}
  .ab-honest-head>div,.ab-sub{grid-column:auto}
  .ab-sub{margin-top:calc(var(--u) * 3)}}

.ab-two{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  margin-top:calc(var(--u) * 6)}
.ab-col{grid-column:7 / -1}
/* El respiro entre las dos listas lo abre este relleno, no un medianil fuera de
   retícula: los filetes de la izquierda cortan 48px antes y ahí queda la calle. */
.ab-col:first-child{grid-column:1 / span 6;padding-right:calc(var(--u) * 4)}
.ab-col h3{display:flex;align-items:center;gap:calc(var(--u) * 1.5);
  font-family:var(--bulma-family-secondary);font-weight:700;font-size:1rem;color:#fff;
  padding-bottom:var(--u)}
/* El distintivo lleva su color en el fondo, no solo en el texto, y se alinea con la
   columna de los signos: la vertical los ata. */
.ab-tag{display:inline-grid;place-items:center;width:24px;height:20px;border-radius:3px;flex:none;
  font-family:var(--font-mono);font-weight:500;font-size:.75rem;letter-spacing:-.02em}
.ab-si .ab-tag{background:var(--rosa);color:var(--vino)}
.ab-no .ab-tag{background:transparent;color:#E7D6CD;box-shadow:inset 0 0 0 1px #ffffff5c}
.ab-col ul{list-style:none;margin:0;padding:0}
.ab-col li{display:grid;grid-template-columns:24px 1fr;gap:calc(var(--u) * 1.5);
  padding:calc(var(--u) * 2) 0;font-size:1rem;line-height:1.6;color:#E7D6CD;
  border-top:1px solid #ffffff5c}
/* Marca tipográfica, no icono: el signo va en su propia columna de la rejiña del ítem. */
.ab-col li::before{font-family:var(--font-mono);font-size:1rem;line-height:1.6;text-align:center}
.ab-si li::before{content:"+";color:var(--rosa)}
.ab-no li::before{content:"−";color:#C9AFA8}
/* Tres de los seis «no» no eran negativas sino servicios con cobro aparte. Van
   abajo, en otro registro: el filete cierra la lista y abre el bloque, y el
   rótulo en rosa avisa que aquí se cambia de tono. Sin caja: la lista de al lado
   tampoco la tiene. */
.ab-aparte{margin-top:calc(var(--u) * 4);padding-top:calc(var(--u) * 3);
  border-top:1px solid #ffffff5c}
.ab-aparte-l{display:block;font-family:var(--font-mono);font-weight:500;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--rosa)}
.ab-aparte p{margin:var(--u) 0 0;font-size:1rem;line-height:1.6;color:#D7C4BC}
/* El burdeos del enlace da 1,87:1 sobre el vino; aquí va en rosa. */
.ab-aparte .rel-todo{margin-top:calc(var(--u) * 2);color:var(--rosa)}

@media (max-width:860px){.ab-col:first-child{grid-column:1 / -1;padding-right:0;
    margin-bottom:calc(var(--u) * 5)}
  .ab-col{grid-column:1 / -1}}

/* ---- con quién trabajamos ---- */
.ab-who-sec{background:var(--paper)}
/* Cinco perfiles en dos filas: 3 arriba y 2 abajo, y las dos de abajo se
   reparten el ancho entero en mitades. La rejilla tiene 6 columnas —el mínimo
   común de 3 y de 2— y cada tarjeta se lleva 2 o 3 según la fila. Así no queda
   hueco a la derecha y las dos filas empiezan y terminan en la misma línea. */
.ab-who{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.ab-who .ab-wcard{grid-column:span 2}
.ab-who .ab-wcard:nth-child(n+4){grid-column:span 3}
.ab-wcard{background:var(--mist);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem 1.35rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
@media (hover:hover){.ab-wcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);
  border-color:transparent}}
.ab-wcard .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--rosa-tenue);color:var(--burdeos)}
.ab-wcard .ic svg{width:21px;height:21px}
.ab-wcard h3{margin-top:.95rem;font-family:var(--bulma-family-secondary);font-weight:700;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.015em;line-height:1.42}
.ab-wcard p{margin-top:.55rem;font-size:.9rem;color:var(--ink-soft);line-height:1.7}
/* Por debajo de 900 se vuelve a la rejilla simple y los tramos se anulan: con
   dos columnas un `span 3` desbordaría la fila. La quinta queda sola y ancha,
   que es lo mismo que pide la fila de abajo en pantalla grande. */
@media (max-width:900px){.ab-who{grid-template-columns:repeat(2,1fr)}
  .ab-who .ab-wcard,.ab-who .ab-wcard:nth-child(n+4){grid-column:auto}
  .ab-who .ab-wcard:nth-child(5){grid-column:1 / -1}}
@media (max-width:560px){.ab-who{grid-template-columns:1fr}}

/* ---- preguntas ---- */
.ab-faq-sec{background:var(--mist)}
.ab-faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);
  align-items:start}
.ab-faq-lbl{position:sticky;top:96px}
.ab-faq-lbl .sd-h{margin-bottom:1rem}
.ab-faq-lbl p{font-size:.93rem;color:var(--ink-soft);max-width:34ch}
.ab-faq-lbl .btn{margin-top:1.2rem;background:var(--paper)}
.ab-faq-sec .faq-body p{color:var(--ink-soft)}
@media (max-width:860px){.ab-faq-grid{grid-template-columns:1fr}.ab-faq-lbl{position:static}}

/* ---- cierre ---- */
.ab-cta-sec{background:var(--paper);padding-top:0}
.ab-cta-sec .srv-cta{margin-top:0}

/* ---- página actual en el menú ---- */
/* Sin ::after en el flujo: el subrayado va posicionado para no mover la barra. */
.nav-links a{position:relative}
.nav-links a.is-actual{color:var(--burdeos)}
.nav-links a.is-actual::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--burdeos)}
@media (max-width:900px){.nav-links a.is-actual::after{display:none}}

/* ===== blog.css ===== */
/* ================= BLOG ================= */
/* Sin fotografías todavía, el orden lo tiene que dar la retícula y no una imagen.
   Todo el bloque se apoya en las mismas 12 columnas del resto del sitio: el
   destacado parte 7/5 y las fichas van de a 4 columnas, así que las tres caen
   exactamente sobre las líneas (4×82 + 3×16 = 376px con el medianil en 16). */

/* ---- destacado ---- */
.bl-dest{background:var(--paper)}
.bl-dest-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  align-items:start}
/* El contenedor ya recorta como foto: cambiar el glifo por un <img> no pide CSS nuevo. */
.bl-dest-fig{grid-column:1 / span 7;aspect-ratio:16 / 9;background:var(--vino);border-radius:4px;
  overflow:hidden;display:grid;place-items:center}
/* El `:not(.glyph)` separa los dos casos que caben aquí: la portada del
   artículo, que llena la caja, y la flor de reserva cuando no hay portada, que
   va centrada y chica. Sin él la flor se estiraba a 16/9 con `object-fit:cover`
   y salía recortada. La regla de la flor decía `svg` de cuando el glifo iba en
   línea; hoy `glifo()` devuelve un `img`. */
.bl-dest-fig img:not(.glyph){width:100%;height:100%;object-fit:cover;display:block}
.bl-dest-fig .glyph{width:clamp(72px,14%,120px);height:auto;opacity:.9}
.bl-dest-txt{grid-column:8 / -1;display:flex;flex-direction:column;min-height:100%}
/* Titular del destacado: un escalón sobre el de las fichas y en caja alta como el
   resto de los títulos del sitio. */
.bl-dest-txt h3{margin-top:var(--u);font-size:clamp(1.25rem,1rem + 1vw,1.5rem);line-height:1.25}
/* El destacado ya es un enlace: el titular cambia de color y la figura se levanta
   apenas. La figura va con aria-hidden y fuera del tabulador para no repetir el
   mismo destino dos veces a quien navega con lector de pantalla o teclado. */
.bl-dest-txt h3 a{color:var(--ink);transition:color .2s}
a.bl-dest-fig{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover){.bl-dest-txt h3 a:hover{color:var(--burdeos)}
  .bl-dest-grid:hover a.bl-dest-fig{transform:translateY(-4px);box-shadow:var(--shadow)}}
.bl-dest-txt .rel-todo{margin-top:calc(var(--u) * 2)}
/* Entre 700 y 1000px el destacado ya es de una columna pero la ventana sigue
   ancha: la bajada llegaba a 125 caracteres por línea. */
.bl-bajada{margin-top:calc(var(--u) * 2);font-size:1rem;line-height:1.7;
  color:var(--ink-soft);max-width:58ch}
.bl-puntos{list-style:none;margin:calc(var(--u) * 3) 0 0;padding:0}
.bl-puntos li{display:grid;grid-template-columns:16px 1fr;gap:var(--u);
  padding:calc(var(--u) * 1.5) 0;border-top:1px solid var(--line-fuerte);
  font-size:.875rem;line-height:1.6;color:var(--ink-soft)}
.bl-puntos li::before{content:"+";font-family:var(--font-mono);font-size:.875rem;line-height:1.6;
  color:var(--burdeos);text-align:center}
@media (max-width:900px){.bl-dest-grid{grid-template-columns:1fr}
  .bl-dest-fig,.bl-dest-txt{grid-column:auto}
  .bl-dest-fig{aspect-ratio:2 / 1;margin-bottom:calc(var(--u) * 3)}}

/* ---- filtros ---- */
.bl-lista{background:var(--mist)}
.bl-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--u);
  margin-bottom:calc(var(--u) * 5)}
.bl-chip{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;line-height:1;color:var(--ink-soft);cursor:pointer;
  background:transparent;border:1px solid var(--line-fuerte);border-radius:3px;
  padding:calc(var(--u) * 1.25) calc(var(--u) * 1.5);
  transition:background .2s,border-color .2s,color .2s}
@media (hover:hover){.bl-chip:hover{border-color:var(--burdeos);color:var(--burdeos)}}
/* El estado activo no se juega solo al color: cambia el fondo, así que también se
   distingue en escala de grises y sin percibir el burdeos. */
.bl-chip.is-actual{background:var(--burdeos);border-color:var(--burdeos);color:#fff}
.bl-cuenta{margin:0 0 0 auto;font-family:var(--font-mono);font-size:.75rem;
  font-variant-numeric:tabular-nums;color:var(--ink-mute)}

/* ---- fichas ---- */
.bl-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);
  gap:calc(var(--u) * 5) var(--medianil)}
/* El filete va por celda y no corrido: el corte del medianil dibuja la retícula,
   igual que en las cifras de las cabeceras. */
.bl-card{grid-column:span 4;display:flex;flex-direction:column;
  padding-top:calc(var(--u) * 1.5);border-top:2px solid var(--ink)}
.bl-card[hidden]{display:none}
.bl-card h3{margin-top:var(--u);font-size:1.0625rem;line-height:1.35}
.bl-card p{margin-top:var(--u);font-size:.875rem;line-height:1.7;color:var(--ink-soft)}

/* Rótulo de la ficha: numeral y tema en la misma línea, separados por un filete
   vertical corto en vez de un punto suelto. */
.bl-k{display:flex;align-items:center;gap:calc(var(--u) * 1.5);margin:0}
.bl-n{font-family:var(--font-mono);font-weight:500;font-size:.75rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink-mute)}
.bl-cat{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--burdeos);line-height:1}
.bl-n + .bl-cat{padding-left:calc(var(--u) * 1.5);border-left:1px solid var(--line-fuerte)}

/* La fecha va abajo del todo para que las fichas de una fila cierren alineadas
   aunque los titulares ocupen distinto número de líneas. */
.bl-meta{display:flex;align-items:center;gap:var(--u);margin:auto 0 0;
  padding-top:calc(var(--u) * 2);font-family:var(--bulma-family-secondary);font-weight:700;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute)}
.bl-meta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--burdeos);
  flex:none}
/* `.bl-card p` (0,2,0) le gana a `.bl-meta` (0,1,0) y le pisaba el margen automático:
   la ficha con el titular más corto dejaba la fecha 23px más arriba que sus vecinas.
   Igualamos especificidad para que el auto vuelva a mandar. */
.bl-card .bl-meta{margin-top:auto}

.bl-vacio{margin-top:calc(var(--u) * 5);padding-top:calc(var(--u) * 3);
  border-top:1px solid var(--line-fuerte);font-size:1rem;color:var(--ink-soft)}
.bl-vacio[hidden]{display:none}

/* Al angostarse siempre se reparte en divisores de 12: seis columnas y luego doce. */
@media (max-width:900px){.bl-card{grid-column:span 6}}
@media (max-width:560px){.bl-card{grid-column:span 12}
  .bl-filtros{gap:6px}
  .bl-cuenta{width:100%;margin:var(--u) 0 0}}

/* ===== articulo.css ===== */
/* ================= ARTÍCULO DEL BLOG ================= */
/* Cuerpo en 1-7 y barra en 9-12, con la columna 8 vacía como calle. Es la misma
   asimetría de las cabeceras, así que el texto arranca en la línea de siempre.
   El cuerpo va a 19px: en 670px de ancho eso deja la línea en 73 caracteres, que
   es donde la lectura larga se sostiene; a 16px se pasaba de 80. */
.art{background:var(--paper)}
.art-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  align-items:start}
.art-col{grid-column:1 / span 7}
/* La columna se estira hasta el pie del artículo: si midiera solo lo suyo, el
   bloque pegajoso se despegaría a los 700px y dejaría la columna vacía el resto
   del camino. */
.side{grid-column:9 / -1;align-self:stretch}

/* ---- cuerpo ---------------------------------------------------------------- */
/* Todo lo de dentro de .art-cuerpo lo va a escribir el administrador, así que aquí
   NO se puede depender de clases ni de divs envoltorio: un editor de texto solo
   produce etiquetas. Cada regla se engancha al elemento. Si mañana hace falta un
   bloque especial, se añade como clase opcional, nunca como requisito. */
.art-cuerpo{font-size:1.1875rem;line-height:1.75;color:var(--ink-soft)}
.art-cuerpo > * + *{margin-top:calc(var(--u) * 2)}
.art-cuerpo p{font-size:inherit;line-height:inherit}

/* La entrada es el primer párrafo, sea cual sea: el editor no va a marcarlo. */
.art-cuerpo > p:first-child{color:var(--ink);padding-bottom:calc(var(--u) * 3);
  border-bottom:1px solid var(--line-fuerte)}

.art-cuerpo h2{margin-top:calc(var(--u) * 6);margin-bottom:calc(var(--u) * 2);
  font-size:clamp(1.25rem,1.05rem + .8vw,1.625rem);line-height:1.3;scroll-margin-top:96px}
.art-cuerpo h3{margin-top:calc(var(--u) * 4);margin-bottom:var(--u);font-size:1.0625rem;
  line-height:1.4;scroll-margin-top:96px}
/* El editor ofrece hasta h4 aunque casi nunca haga falta: que al menos no choque. */
.art-cuerpo h4{margin-top:calc(var(--u) * 3);margin-bottom:var(--u);font-size:.9375rem;
  line-height:1.4}
/* Al pulsar Intro dos veces, muchos editores dejan un <p> vacío o un <p><br></p>.
   Sin esto abren un hueco de 16px que nadie escribió. Van en dos reglas: un `:has()`
   no soportado invalidaría también al `:empty`. */
.art-cuerpo p:empty{display:none}
.art-cuerpo p:has(> br:only-child){display:none}
.art-cuerpo code{font-family:var(--font-mono);font-size:.875em;background:var(--mist);
  padding:2px 5px;border-radius:3px;color:var(--ink)}
.art-cuerpo pre{overflow-x:auto;background:var(--mist);padding:calc(var(--u) * 2);
  border-radius:4px}
.art-cuerpo pre code{background:none;padding:0}
.art-cuerpo em,.art-cuerpo i{font-style:italic}
.art-cuerpo strong,.art-cuerpo b{font-weight:700;color:var(--ink)}
/* Enlaces dentro del texto: subrayado siempre, no solo al pasar por encima. En medio
   de un párrafo el color por sí solo no basta para distinguirlos. */
.art-cuerpo a{color:var(--burdeos);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb, var(--burdeos) 33.33%, transparent);transition:text-decoration-color .2s}
@media (hover:hover){.art-cuerpo a:hover{text-decoration-color:var(--burdeos)}}
.art-cuerpo hr{margin:calc(var(--u) * 5) 0;border:0;border-top:1px solid var(--line-fuerte)}

/* Listas con filete de borde a borde y la marca en su propia columna. La marca va
   posicionada, no en rejilla: así da igual cuántos elementos meta el editor dentro
   del <li>. Con rejilla, un segundo hijo de bloque caía en la columna de la marca y
   el texto se partía palabra por palabra. */
.art-cuerpo ul,.art-cuerpo ol{list-style:none;padding:0;border-top:1px solid var(--line-fuerte)}
.art-cuerpo ul > li,.art-cuerpo ol > li{position:relative;
  padding:calc(var(--u) * 2) 0 calc(var(--u) * 2) calc(var(--u) * 4);
  border-bottom:1px solid var(--line-fuerte);font-size:1rem;line-height:1.7}
.art-cuerpo ul > li::before,.art-cuerpo ol > li::before{position:absolute;left:0;
  top:calc(var(--u) * 2);width:calc(var(--u) * 3);font-family:var(--font-mono);font-weight:500;
  font-size:1rem;line-height:1.7;color:var(--burdeos)}
.art-cuerpo ul > li::before{content:"+";text-align:center}
.art-cuerpo ol{counter-reset:paso}
.art-cuerpo ol > li{counter-increment:paso}
.art-cuerpo ol > li::before{content:counter(paso,decimal-leading-zero);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* Listas anidadas: sin filetes y con la marca discreta. */
.art-cuerpo li ul,.art-cuerpo li ol{margin-top:var(--u);border-top:0}
.art-cuerpo li li{border-bottom:0;padding-top:4px;padding-bottom:4px}
.art-cuerpo li li::before{top:4px;color:var(--ink-mute)}

/* Cita destacada: sin comillas decorativas ni caja. Un filete grueso a la izquierda
   y cuerpo mayor bastan para cambiar de registro. */
.art-cuerpo blockquote{margin-top:calc(var(--u) * 5);margin-left:0;margin-right:0;
  padding:0 0 0 calc(var(--u) * 3);border-left:3px solid var(--burdeos)}
.art-cuerpo blockquote p{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);line-height:1.5;
  color:var(--ink);font-style:italic}
.art-cuerpo blockquote cite{display:block;margin-top:calc(var(--u) * 1.5);font-style:normal;
  font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-mute)}

/* Una tabla es ancha por naturaleza y el editor la va a insertar suelta: el script la
   envuelve en .art-scroll para que se desplace dentro de su marco y la página nunca
   se corra en horizontal. */
.art-scroll{overflow-x:auto}
.art-cuerpo table{width:100%;min-width:520px;border-collapse:collapse;text-align:left}
.art-cuerpo caption{margin-bottom:var(--u);font-family:var(--font-mono);font-size:.75rem;
  color:var(--ink-mute);text-align:left}
.art-cuerpo th,.art-cuerpo td{padding:calc(var(--u) * 1.5) calc(var(--u) * 1.5)
  calc(var(--u) * 1.5) 0;vertical-align:top;font-size:.9375rem;line-height:1.6;
  border-bottom:1px solid var(--line-fuerte)}
/* Base: cualquier <th> del cuerpo es cabecera de fila. Si el editor no marca la
   primera columna como <th> (las tablas de Markdown nunca lo hacen), la tabla se lee
   igual, solo sin el destaque. Sin `nowrap`: con textos de largo desconocido
   obligaría a desplazar la tabla sin necesidad. */
.art-cuerpo tbody th{font-family:var(--bulma-family-secondary);font-weight:700;
  color:var(--burdeos)}
.art-cuerpo thead th{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);border-bottom:2px solid var(--ink)}
/* No todos los editores envuelven la fila de cabecera en <thead>: algunos dejan los
   <th> sueltos en el <tbody>. Una fila de cabecera es la primera que no tiene ni un
   <td>. Va en su propia regla y no en la lista de arriba a propósito: un `:has()` no
   soportado invalida la regla entera, y se llevaría por delante al `thead th`. */
.art-cuerpo tbody > tr:first-child:not(:has(td)) > th{font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);
  border-bottom:2px solid var(--ink)}
.art-cuerpo td{color:var(--ink-soft)}

/* Imágenes: el editor las va a subir sin dimensiones ni contenedor, así que se sujetan
   aquí. El pie va en gris y en cuerpo chico, como los datos del sitio. */
.art-cuerpo img{display:block;width:100%;height:auto;border-radius:4px;background:var(--mist)}
.art-cuerpo figure{margin-left:0;margin-right:0}
.art-cuerpo figcaption{margin-top:var(--u);font-size:.875rem;line-height:1.6;color:var(--ink-mute)}

/* ---- plantilla del artículo (esto no sale del administrador) --------------- */
/* El aviso legal no lleva icono de alerta: no es un error, es una precisión. */
.art-nota{margin-top:calc(var(--u) * 5);background:var(--mist);border-left:3px solid var(--ink-mute);
  padding:calc(var(--u) * 2.5) calc(var(--u) * 3)}
/* El aviso ocupa las 7 columnas del artículo, que a 1440 son 670px: en cuerpo
   pequeño eso daba 95 caracteres por línea. */
.art-nota p{font-size:.9375rem;line-height:1.7;color:var(--ink-soft);max-width:58ch}

.art-firma{margin-top:calc(var(--u) * 6);padding-top:calc(var(--u) * 3);
  border-top:2px solid var(--ink);display:grid;grid-template-columns:56px 1fr;
  gap:calc(var(--u) * 2)}
.art-firma-g{width:56px;height:56px;border-radius:4px;background:var(--vino);display:grid;
  place-items:center}
/* La flor es un `img`, no un `svg`: la regla decía `svg` desde cuando el glifo
   iba en línea, así que no la alcanzaba ninguna medida. Y `.glyph` trae
   `width:auto` y `max-width:none`, que anulan los atributos del propio `img`;
   sin una altura aquí la imagen salía a su tamaño natural —240 × 209— encima
   del texto de la firma. Solo el alto: la flor no es cuadrada. */
.art-firma-g .glyph{height:30px}
.art-firma-n{margin:0;font-family:var(--bulma-family-secondary);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.015em;color:var(--ink)}
.art-firma-d{margin-top:var(--u);font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.art-firma .rel-todo{margin-top:calc(var(--u) * 2)}

/* ---- barra lateral --------------------------------------------------------- */
/* Se queda a la vista mientras se lee, con el alto acotado a la ventana. El índice
   sale de los h2 del artículo, así que un texto largo puede hacerlo crecer sin
   límite: cuando eso pasa, el que cede y se desplaza es el índice, no la caja del
   estudio, para que el botón no quede nunca fuera de alcance.
   Va en flexbox y no en rejilla a propósito: una fila `auto` de rejilla no encoge
   por debajo de su contenido aunque se le dé `minmax(0,auto)`, y aquí lo que hace
   falta es exactamente eso. En columna flexible el índice cede (`min-height:0` lo
   permite) y la caja del estudio se planta (`flex:none`). */
.side-pega{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;
  display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
.side-idx{display:flex;flex-direction:column;min-height:0;flex:0 1 auto}
.side-idx ol{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.side-est{flex:none}
.side-t{margin:0 0 calc(var(--u) * 2);padding-bottom:var(--u);
  border-bottom:2px solid var(--ink);font-family:var(--bulma-family-secondary);font-weight:700;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.side-blq[hidden]{display:none}

/* Índice: numeral monoespaciado y el título en su columna. El apartado que se está
   leyendo se marca con el filete y el color, no solo con el color.
   El texto sale de los h2 del artículo, así que puede venir de cualquier largo: se
   corta a dos líneas para que el bloque no crezca sin control y la barra siga
   cabiendo en la ventana. El numeral va posicionado, no en rejilla, porque el corte
   a N líneas necesita que el enlace sea una caja de texto y no un contenedor. */
.side-idx ol{list-style:none;counter-reset:idx;margin:0;padding:0}
/* El relleno vertical va en el <li> y no en el enlace: `overflow:hidden` recorta en
   el borde de la caja de relleno, así que con el relleno dentro del enlace la tercera
   línea del recorte asomaba por debajo en vez de desaparecer. */
.side-idx li{counter-increment:idx;position:relative;padding:var(--u) 0;
  margin-left:calc(var(--u) * -1.5);border-left:2px solid transparent;
  transition:border-color .2s}
.side-idx a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;padding-left:calc(var(--u) * 4);font-size:.875rem;line-height:1.5;
  color:var(--ink-soft);transition:color .2s}
.side-idx li::before{content:counter(idx,decimal-leading-zero);position:absolute;
  left:calc(var(--u) * 1.5);top:var(--u);font-family:var(--font-mono);font-size:.75rem;
  font-variant-numeric:tabular-nums;color:var(--ink-mute);line-height:1.5}
@media (hover:hover){.side-idx a:hover{color:var(--burdeos)}}
/* La marca del apartado activo la pone el script en el <li>, no en el enlace: el
   filete y el numeral viven ahí y así no hace falta un :has(). */
.side-idx li.is-actual{border-left-color:var(--burdeos)}
.side-idx li.is-actual::before{color:var(--burdeos)}
.side-idx li.is-actual a{color:var(--burdeos)}

/* Caja del estudio: la única superficie con fondo de toda la barra, porque es la que
   tiene que destacar sobre la otra. */
.side-est{background:var(--mist);padding:calc(var(--u) * 3)}
/* Sin tope corría a 98 caracteres por línea en cuanto la barra se pliega bajo
   el texto y hereda los 600px de la columna. Un `ch` es el ancho del cero, más
   ancho que la media de las minúsculas: 58ch dan unos 74 caracteres reales. */
.side-est-d{margin:0;font-size:.875rem;line-height:1.7;color:var(--ink-soft);max-width:58ch}
.side-datos{margin:calc(var(--u) * 3) 0 0;display:grid;gap:0}
.side-datos>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--u);
  padding:var(--u) 0;border-top:1px solid var(--line-fuerte)}
.side-datos dt{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.side-datos dd{margin:0;font-family:var(--font-mono);font-weight:500;font-size:.9375rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);text-align:right}
.side-btn{width:100%;margin-top:calc(var(--u) * 3);font-size:.8125rem}

/* Seguir leyendo: salió de la barra a una banda propia bajo el artículo. En la barra
   subía el bloque a 1155px de alto, más que cualquier ventana, y el pegajoso quedaba
   siempre cortado con su propia barra de desplazamiento. Abajo se ve entero y reusa
   las mismas fichas del índice del blog. */
.art-mas{background:var(--mist)}
.art-mas-h{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 2);
  flex-wrap:wrap;margin-bottom:calc(var(--u) * 4)}
.art-mas-h .sd-h{margin:0;flex:1}
.art-mas-h .rel-todo{margin:0}

/* Al angostarse la barra deja de ser barra: pasa abajo, a fila completa, y el índice
   sobra porque el artículo ya queda a un scroll de distancia. */
@media (max-width:1000px){
  .art-col,.side{grid-column:1 / -1}
  .side{margin-top:calc(var(--u) * 7)}
  /* Aquí ya no hay nada que encoger: sin el índice queda solo la caja del estudio. */
  .side-pega{position:static;max-height:none;overflow:visible}
  .side-idx{display:none}
  .art-cuerpo{font-size:1.0625rem}
  /* Sin la barra al lado, el texto se estiraría a todo el ancho: a 945px eso da 114
     caracteres por línea y deja de leerse. El tope lo devuelve a unos 73, la misma
     medida que tenía en la columna de siete. La barra se acota igual para que las dos
     zonas cierren sobre la misma vertical. */
  .art-col,.side-pega{max-width:600px}
}


/* ===== contacto.css ===== */
/* ===================== CONTACTO ===================== */
/* Misma retícula que el artículo: el bloque principal ocupa 7 columnas y la barra
   arranca en la 9. Así las tres páginas de contenido caen sobre las mismas líneas. */
.co-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  align-items:start}
.co-main{grid-column:1 / span 7}
.co-lado{grid-column:9 / -1}
.co-fondo{background:var(--mist)}

.co-main > .sd-h{margin-bottom:calc(var(--u) * 2)}
.co-intro{color:var(--ink-soft);margin:0 0 calc(var(--u) * 3);max-width:62ch}

/* ---- formulario ---- */
/* La tarjeta va en mist y no en papel a propósito: los campos son blancos y su
   filete se queda en 1,2:1, o sea que sobre papel el campo desaparecía y solo lo
   delataba el texto. Sobre mist el propio relleno del campo hace de borde. */
.co-form{background:var(--mist);border:1px solid var(--line);border-radius:16px;
  padding:calc(var(--u) * 4);display:grid;gap:calc(var(--u) * 2);box-shadow:var(--shadow-sm)}
.co-form .btn{width:100%;margin-top:var(--u)}
/* El combo a medida no es un elemento etiquetable, así que su rótulo va en un
   <span> y hay que darle a mano el aspecto de los <label> del formulario. */
.co-form .sel-lbl{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-mute)}
/* La fila de dos campos se rompe antes que la página: a 600px de columna dos
   campos de 290 todavía respiran, por debajo no. */
@media (max-width:700px){.co-form .two{grid-template-columns:1fr}}

/* La letra chica del pie hereda el ancho de la tarjeta: a 670px de columna
   corría a 97 caracteres por línea, y en cuerpo pequeño eso ya no se lee.
   El tope va en `ch`, que escala con la fuente. Ojo: un `ch` es el ancho del
   cero, más ancho que la media de las minúsculas, así que 58ch dan unos 74
   caracteres reales, no 58. */
.co-form .form-note,.co-legal{max-width:58ch}
.co-legal{font-size:.78rem;color:var(--ink-mute);line-height:1.65;margin:0}
.co-legal a{color:var(--burdeos);text-decoration:underline;text-underline-offset:2px}

/* ---- barra: canales directos ---- */
.co-lado{display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
.co-blq{border-top:2px solid var(--ink);padding-top:calc(var(--u) * 2)}
.co-blq .side-t{border-bottom:0;padding-bottom:0}

.co-canales{list-style:none;padding:0;margin:0}
.co-canales li + li{border-top:1px solid var(--line-fuerte)}
.co-canales a,.co-canales > li > div{display:flex;gap:calc(var(--u) * 1.5);align-items:flex-start;
  padding:calc(var(--u) * 1.75) 0;color:var(--ink)}
.co-canales a{transition:color .2s}
.co-canales a:hover{color:var(--burdeos)}
.co-canales .ic{width:34px;height:34px;border-radius:9px;background:var(--mist);flex:none;
  display:grid;place-items:center;color:var(--burdeos);transition:background .2s}
.co-canales a:hover .ic{background:var(--rosa-tenue)}
.co-canales .ic svg{width:17px;height:17px}
/* `min-width:0` para que un correo largo pueda partirse en vez de estirar la fila. */
.co-canales .txt{flex:1;min-width:0}
.co-canales b{display:block;font-family:var(--bulma-family-secondary);font-weight:700;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink)}
.co-canales .txt > span{display:block;margin-top:3px;font-size:.9rem;line-height:1.55;
  color:var(--ink-soft);overflow-wrap:anywhere}
/* El dato de contacto es cifra, no prosa: va en mono como el resto de los datos. */
.co-canales .txt > .dato{font-family:var(--font-mono);font-size:.875rem;color:inherit}

/* ---- barra: horario ---- */
.co-horas{margin:0;font-size:.875rem;line-height:1.7}
.co-horas > div{display:flex;justify-content:space-between;gap:var(--u);
  padding:calc(var(--u) * 1.25) 0;border-bottom:1px solid var(--line-fuerte)}
.co-horas > div:last-child{border-bottom:0}
.co-horas dt{color:var(--ink-soft)}
.co-horas dd{margin:0;font-family:var(--font-mono);color:var(--ink);white-space:nowrap}

/* ---- qué pasa después ---- */
.co-pasos{display:grid;grid-template-columns:repeat(var(--cols),1fr);
  gap:calc(var(--u) * 4) var(--medianil)}
.co-paso{grid-column:span 4;display:flex;flex-direction:column;
  padding-top:calc(var(--u) * 1.5);border-top:2px solid var(--ink)}
.co-paso .n{display:block;font-family:var(--font-mono);font-size:.8rem;color:var(--burdeos);
  letter-spacing:.06em}
.co-paso h3{margin:calc(var(--u) * 1.5) 0 0;font-size:1rem}
.co-paso p{margin:var(--u) 0 0;font-size:.92rem;line-height:1.7;color:var(--ink-soft)}
/* `margin-top:auto` alinea el plazo al pie aunque los tres párrafos midan distinto.
   Va con la especificidad del contenedor porque `.co-paso p` (0,2,0) le ganaría. */
.co-paso .cuando{display:block;margin-top:auto;padding-top:calc(var(--u) * 2);
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute)}

/* ---- pliegues ---- */
@media (max-width:1000px){
  /* La medida se dispara al perder la barra: 7 columnas sueltas dan 100+ caracteres
     por línea. Se ata a 600px, la misma cota que usa el artículo. */
  .co-main,.co-lado{grid-column:1 / -1;max-width:600px}
  .co-lado{margin-top:calc(var(--u) * 7)}
  .co-paso{grid-column:span 6}
}
@media (max-width:640px){
  .co-form{padding:calc(var(--u) * 2.5)}
  .co-paso{grid-column:span 12}
}

/* ---- preguntas ---- */
/* La misma asimetría del formulario, invertida: el rótulo en las cuatro primeras
   columnas y las preguntas en las siete últimas. Antes el bloque colgaba de
   `.co-main` y dejaba media página vacía a la derecha. */
.co-faq{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  align-items:start}
.co-faq-t{grid-column:1 / span 4}
.co-faq-l{grid-column:6 / -1}
.co-faq-t h2{font-size:.9rem;letter-spacing:.1em;padding-bottom:var(--u);
  border-bottom:2px solid var(--ink)}
.co-faq-t p{margin:calc(var(--u) * 2) 0 0;font-size:.9rem;line-height:1.7;
  color:var(--ink-soft);max-width:58ch}
/* El texto de la pregunta respira más que en las páginas de servicio: aquí la
   columna es de siete y una línea corta se perdía en el ancho. */
.co-faq-l .faq-head{font-size:1.05rem;padding:calc(var(--u) * 2) 0}
.co-faq-l .faq{border-top:2px solid var(--ink)}

@media (max-width:1000px){
  .co-faq-t,.co-faq-l{grid-column:1 / -1;max-width:600px}
  .co-faq-l{margin-top:calc(var(--u) * 4)}
}

/* ===== calculadora.css ===== */
/* ===================== CALCULADORA DE COSTOS =====================
   Misma retícula de 12 columnas que el resto del sitio. Los mandos ocupan
   1-6 y la boleta 8-12: la columna 7 queda vacía y hace de medianil ancho,
   que es lo que separa "lo que eliges" de "lo que cuesta".

   Código de color del destinatario, el mismo del calendario de la portada:
   Camelie burdeos · INAPI gris cálido · Diario Oficial teal. Sobre el vino
   de la boleta esos tres no llegan a 4,5:1, así que ahí van sus versiones
   claras —y solo como filete, nunca como color del texto.
   ================================================================= */

/* Etiqueta que existe para el lector de pantalla y no para el ojo. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.calc{background:var(--mist)}
.calc-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil)}
/* En columna para que la nota del pie pueda empujarse con margin-top:auto y
   las dos columnas cierren a la misma altura. */
.calc-mandos{grid-column:1 / span 6;display:flex;flex-direction:column}
.calc-lado{grid-column:8 / -1}

/* ---- los pasos ---------------------------------------------------------- */
/* Sin `align-items:start` a propósito: la columna de la boleta tiene que
   estirarse hasta el alto de la fila para que el `sticky` de dentro tenga por
   dónde viajar. Si se encoge a su contenido, no se despega nunca. */

.calc-paso{border:0;padding:0;margin:0}
.calc-paso + .calc-paso{margin-top:calc(var(--u)*6)}
.calc-paso legend{display:flex;align-items:baseline;gap:.75rem;width:100%;
  padding:calc(var(--u)*1.5) 0 0;border-top:2px solid var(--ink);
  font-family:var(--bulma-family-secondary);font-weight:600;font-size:1.25rem;
  line-height:1.25;color:var(--ink);text-transform:none;letter-spacing:-.01em}
.calc-n{flex:none;font-family:var(--font-mono);font-weight:500;font-size:.8rem;
  letter-spacing:.06em;color:var(--burdeos)}
.calc-ayuda{margin-top:.7rem;color:var(--ink-soft);font-size:.95rem;max-width:52ch}

/* ---- selector de clases ------------------------------------------------- */
.calc-stepper{display:flex;align-items:center;gap:1rem;margin-top:calc(var(--u)*3)}
.st-b{width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-fuerte);border-radius:50%;background:var(--paper);
  font-family:var(--font-mono);font-size:1.35rem;line-height:1;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.st-b:hover{background:var(--burdeos);border-color:var(--burdeos);color:#fff}
.st-b:disabled{opacity:.35;cursor:not-allowed}
.st-b:disabled:hover{background:var(--paper);border-color:var(--line-fuerte);color:var(--ink)}
/* El número de clases es la pregunta y el total es la respuesta: el total
   tiene que ser el tipo más grande de la sección, no al revés. */
.st-n{font-family:var(--font-mono);font-weight:500;font-size:clamp(2.5rem,1.9rem + 2.2vw,3.3rem);
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);
  min-width:2.2ch;text-align:center}
.st-lbl{font-family:var(--bulma-family-secondary);font-weight:600;font-size:1rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute)}

/* El deslizador: pista de 4px sobre la línea estructural, pulgar en burdeos.
   Se estilan las dos sintaxis porque WebKit y Gecko no comparten ninguna. */
/* El pulgar viaja entre 11px y (ancho - 11px), no entre 0 y el ancho: la
   marca se calcula sobre ese recorrido o queda corrida. --pos lo pone la
   plantilla, que es quien sabe cuántas clases van incluidas. */
.calc-rango{position:relative;display:block;margin-top:calc(var(--u)*5)}
.calc-marca{position:absolute;top:-18px;left:calc(11px + (100% - 22px) * var(--pos));
  width:1px;height:14px;background:var(--burdeos);opacity:.7}
.calc-marca b{position:absolute;left:6px;bottom:-1px;white-space:nowrap;font-family:var(--font-mono);
  font-weight:400;font-size:.68rem;letter-spacing:.02em;color:var(--burdeos)}
.calc-rango input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;
  background:transparent;cursor:pointer}
.calc-rango input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:var(--line-fuerte)}
.calc-rango input[type=range]::-moz-range-track{height:4px;border-radius:2px;
  background:var(--line-fuerte)}
.calc-rango input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--burdeos);
  border:3px solid var(--paper);box-shadow:0 0 0 1px var(--burdeos)}
.calc-rango input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--burdeos);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--burdeos)}
.calc-rango input[type=range]:focus-visible{outline:2px solid var(--foco);outline-offset:4px}
.calc-escala{display:flex;justify-content:space-between;margin-top:.4rem;
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-mute)}
.calc-nota-paso{margin-top:calc(var(--u)*2);padding-left:calc(var(--u)*1.5);
  border-left:2px solid var(--burdeos);font-size:.9rem;color:var(--ink-soft);max-width:50ch}

/* ---- las dos vías ------------------------------------------------------- */
.calc-vias{display:grid;grid-template-columns:1fr 1fr;gap:var(--medianil);
  margin-top:calc(var(--u)*3)}
.via{position:relative;display:flex;flex-direction:column;gap:.5rem;cursor:pointer;
  padding:calc(var(--u)*2.5) calc(var(--u)*2.5) calc(var(--u)*2);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.via:hover{border-color:var(--line-fuerte)}
.via input{position:absolute;opacity:0;width:0;height:0}
.via:focus-within{outline:2px solid var(--foco);outline-offset:3px}
.via.is-elegida{border-color:var(--burdeos);box-shadow:inset 0 0 0 1px var(--burdeos)}
.via-marca{position:absolute;top:calc(var(--u)*2);right:calc(var(--u)*2);
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:var(--burdeos);color:#fff;opacity:0;transform:scale(.7);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.via-marca svg{width:13px;height:13px}
.via.is-elegida .via-marca{opacity:1;transform:none}
.via-t{font-family:var(--bulma-family-secondary);font-weight:700;font-size:1.05rem;
  color:var(--ink);padding-right:calc(var(--u)*3.5)}
.via-d{font-size:.86rem;line-height:1.6;color:var(--ink-soft)}
.via-m{margin-top:auto;padding-top:calc(var(--u)*1.5);border-top:1px solid var(--line);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mute)}
.via-m b{display:block;margin-top:.25rem;font-family:var(--font-mono);font-weight:500;
  font-size:1.15rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  text-transform:none;color:var(--ink)}
.via.is-elegida .via-m b{color:var(--burdeos)}

.calc-check{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:center;
  margin-top:calc(var(--u)*2.5);cursor:pointer}
.calc-check input{width:18px;height:18px;accent-color:var(--burdeos)}
.calc-check span{font-weight:600;font-size:.95rem;color:var(--ink)}
.calc-check small{grid-column:2;font-size:.84rem;color:var(--ink-soft)}
/* El `display:grid` de arriba le gana al [hidden] del navegador: hay que
   decirlo a mano o el campo de la firma no se esconde nunca. */
.calc-check[hidden]{display:none}

.calc-pie{margin-top:auto;padding-top:calc(var(--u)*2.5);
  border-top:1px solid var(--line-fuerte)}
.calc-pie-t{display:block;font-family:var(--font-mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.11em;color:var(--burdeos)}
.calc-pie p{margin-top:.6rem;font-size:.9rem;line-height:1.65;color:var(--ink-soft);
  max-width:52ch}

/* ---- la boleta ---------------------------------------------------------- */
.boleta{position:sticky;top:88px;                 /* 72px de nav + un respiro */
  background:var(--vino);color:#F1E4DC;border-radius:16px;
  padding:calc(var(--u)*4) calc(var(--u)*3.5);box-shadow:var(--shadow),var(--hairline)}
.bo-total{margin-top:1rem;font-family:var(--font-mono);font-weight:500;
  font-size:clamp(2.4rem,1.6rem + 2.8vw,3.4rem);line-height:1.05;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:#fff}
.bo-para{margin-top:.45rem;font-size:.9rem;color:#DECCC9}

/* Barra de proporción. Los tramos usan los mismos colores que el filete de
   cada línea del desglose, para que el ojo los una sin que nadie lo explique.
   INAPI va en crema y no en gris: es el tramo más ancho, y un gris del ancho
   de media barra se lee como pista vacía en vez de como relleno. */
.bo-barra{display:flex;gap:2px;height:10px;margin-top:calc(var(--u)*3);
  border-radius:5px;overflow:hidden}
.bo-barra span{display:block;min-width:3px}
.bo-barra span[data-quien=camelie]{background:var(--rosa)}
.bo-barra span[data-quien=inapi]{background:var(--cream)}
.bo-barra span[data-quien=diario]{background:#7FCFC0}
.bo-barra span[data-quien=otro]{background:#C7B9B6}
.bo-reparto{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:calc(var(--u)*1.5);
  font-size:.74rem;letter-spacing:.02em;color:#C9B4B0}
.bo-reparto span{display:inline-flex;align-items:center;gap:.4rem}
.bo-reparto span::before{content:"";width:8px;height:8px;border-radius:2px}
.bo-reparto span[data-quien=camelie]::before{background:var(--rosa)}
.bo-reparto span[data-quien=inapi]::before{background:var(--cream)}
.bo-reparto span[data-quien=diario]::before{background:#7FCFC0}
.bo-reparto span[data-quien=otro]::before{background:#C7B9B6}
.bo-reparto b{font-family:var(--font-mono);font-weight:500;color:#fff}

.bo-lineas{margin-top:calc(var(--u)*3);border-top:1px solid #ffffff2e}
.bo-l{display:grid;grid-template-columns:1fr auto;gap:.15rem .9rem;
  padding:calc(var(--u)*1.75) 0 calc(var(--u)*1.75) calc(var(--u)*1.5);
  border-bottom:1px solid #ffffff1f;border-left:3px solid transparent}
.bo-l[data-quien=camelie]{border-left-color:var(--rosa)}
.bo-l[data-quien=inapi]{border-left-color:var(--cream)}
.bo-l[data-quien=diario]{border-left-color:#7FCFC0}
.bo-l[data-quien=otro]{border-left-color:#C7B9B6}
.bo-c{font-weight:600;font-size:.95rem;color:#fff}
.bo-m{font-family:var(--font-mono);font-weight:500;font-size:.98rem;
  font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.bo-d{grid-column:1 / -1;font-size:.8rem;line-height:1.55;color:#C9B4B0;max-width:44ch}

/* La suma repetida al pie se fue: el total ya está arriba en cuerpo grande y
   la lista tiene cuatro líneas. Repetirlo a dos dedos no sumaba nada. */
.bo-anno{margin-top:calc(var(--u)*2.5);padding-top:calc(var(--u)*2);
  border-top:2px solid var(--rosa);font-size:.88rem;color:#DECCC9}
.bo-anno b{color:#fff;font-family:var(--font-mono);font-weight:500}
.bo-utm{margin-top:calc(var(--u)*2);padding-top:calc(var(--u)*2);border-top:1px solid #ffffff1f;
  font-size:.78rem;line-height:1.6;color:#C0AAA5}
.bo-cta{width:100%;margin-top:calc(var(--u)*3)}

/* ---- calendario de pago ------------------------------------------------- */
.calc-cal{background:var(--paper)}
.momentos{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  margin-top:calc(var(--u)*6)}
/* Las tres reglas superiores ya forman una línea de tiempo: el punto marca
   dónde cae cada pago sobre ella. */
.mo{position:relative;grid-column:span 4;display:flex;flex-direction:column;
  padding-top:calc(var(--u)*2.5);border-top:2px solid var(--ink)}
.mo::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;
  border-radius:50%;background:var(--burdeos)}
.mo-k{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em}
.mo-n{color:var(--burdeos)}
.mo-w{color:var(--ink-mute)}
.mo h3{margin-top:calc(var(--u)*1.5);font-size:1.15rem}
.mo-total{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  margin-top:.5rem;font-family:var(--font-mono);font-weight:500;font-size:1.7rem;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
.mo-parte{font-size:.8rem;letter-spacing:.02em;color:var(--ink-mute)}
/* Cuánto pesa este pago dentro del total. Sin la barra hay que restar tres
   cifras de cabeza para saber cuál es el grande. */
.mo-barra{height:4px;margin-top:calc(var(--u)*1.5);background:var(--line);border-radius:2px}
.mo-barra i{display:block;height:100%;border-radius:2px;background:var(--burdeos)}
.mo-lineas{margin-top:calc(var(--u)*2.5)}
.mo-lineas li{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:baseline;
  padding:.55rem 0 .55rem calc(var(--u)*1.25);border-bottom:1px solid var(--line);
  border-left:3px solid transparent;font-size:.86rem;color:var(--ink-soft)}
.mo-lineas li[data-quien=camelie]{border-left-color:var(--burdeos)}
.mo-lineas li[data-quien=inapi]{border-left-color:#9C918F}
.mo-lineas li[data-quien=diario]{border-left-color:var(--teal)}
.mo-lineas li[data-quien=otro]{border-left-color:var(--ink)}
.mo-m{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);
  white-space:nowrap}
.mo-nota{margin-top:auto;padding-top:calc(var(--u)*2);font-size:.84rem;line-height:1.6;
  color:var(--ink-mute);max-width:40ch}

/* ---- la diferencia ------------------------------------------------------ */
.calc-vs{background:var(--mist-2)}
/* Comparacion en filas alineadas y no en dos listas sueltas: puestas una al
   lado de la otra, cada fila se lee en horizontal y la diferencia salta sin
   tener que recordar lo que decia la columna de al lado. */
.vs-tabla{margin-top:calc(var(--u)*6);border-bottom:1px solid var(--line-fuerte)}
/* Sin `align-items:baseline`: con baseline cada celda se dimensiona a su propio
   contenido, y en las filas donde la columna del medio ocupa dos líneas y la
   derecha una, la banda rosa se quedaba 24px corta. Estirando (que es el valor
   por defecto) la banda mide siempre lo que mide la fila y corre entera de
   arriba abajo. Las primeras líneas siguen alineadas porque las tres celdas
   comparten el mismo relleno superior. */
.vs-f{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:.4rem var(--medianil);
  border-top:1px solid var(--line-fuerte)}
.vs-q{grid-column:1 / span 3;padding:calc(var(--u)*2.5) 0}
.vs-a{grid-column:5 / span 4;padding:calc(var(--u)*2.5) 0}
/* La columna nuestra lleva fondo propio y corre de arriba abajo: es la unica
   marca que necesita para leerse como una sola cosa y no como seis celdas. */
.vs-b{grid-column:9 / -1;padding:calc(var(--u)*2.5) calc(var(--u)*2);
  background:var(--rosa-tenue)}

.vs-cab{border-top:2px solid var(--ink)}
/* --ink-mute sobre el mist-2 se queda en 4,45:1 y esto es texto de 12px:
   con --ink-soft sube a 5,2 y pasa el mínimo de 4,5. */
.vs-cab span{font-family:var(--bulma-family-secondary);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
  padding-top:calc(var(--u)*1.5);padding-bottom:calc(var(--u)*1.5)}
.vs-cab .vs-b{color:var(--burdeos)}

/* El rótulo de fila va en caja baja aunque los títulos del sitio vayan en
   mayúsculas: seis titulares apilados compiten con la cabecera de la tabla,
   que ya es versalita, y la fila deja de leerse como fila. */
.vs-f h3{font-size:1rem;line-height:1.45;text-transform:none;letter-spacing:0}
.vs-f p{font-size:.92rem;line-height:1.62;color:var(--ink-soft);max-width:42ch}
/* El tope de 42ch es para el texto, pero en la columna rosa recorta la celda
   entera y con ella el fondo: de 1180px para arriba la banda salía 22px más
   corta que la de la cabecera —que es un <span> y no lo hereda— y las dos
   franjas rosas quedaban desalineadas por la derecha. Aquí manda la columna,
   que ni en la pantalla más ancha pasa de unos 48 caracteres. */
.vs-f .vs-b{color:var(--ink);max-width:none}

.vs-cierre{display:flex;gap:.85rem;align-items:flex-start;margin-top:calc(var(--u)*4);
  padding:calc(var(--u)*2) calc(var(--u)*2.5);background:var(--paper);
  border:1px solid var(--line);border-radius:12px;max-width:74ch;
  font-size:.94rem;line-height:1.65;color:var(--ink-soft)}
.vs-cierre svg{flex:none;width:20px;height:20px;margin-top:.2em;color:var(--burdeos)}
.vs-cierre a{color:var(--burdeos);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* ---- supuestos ---------------------------------------------------------- */
.calc-supuestos{background:var(--paper);padding-bottom:calc(var(--u)*6)}
.sup-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:0 var(--medianil);
  align-items:start}
.sup-t{grid-column:1 / span 4;font-size:1.5rem;padding-top:calc(var(--u)*1.5);
  border-top:2px solid var(--ink)}
.sup-l{grid-column:6 / -1}
.sup-l li{padding:calc(var(--u)*2) 0;border-top:1px solid var(--line);font-size:.95rem;
  line-height:1.7;color:var(--ink-soft);max-width:58ch}
.sup-l li:first-child{border-top:0;padding-top:calc(var(--u)*1.5)}
.sup-l b{color:var(--ink);font-weight:700}
.sup-legal{margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*2);
  border-top:1px solid var(--line)}
.sup-legal p{font-size:.82rem;line-height:1.7;color:var(--ink-mute);max-width:80ch}

.calc-faq-sec{background:var(--mist)}

/* ---- adaptación --------------------------------------------------------- */
@media (max-width:1000px){
  .calc-mandos,.calc-lado{grid-column:1 / -1}
  .calc-lado{margin-top:calc(var(--u)*6)}
  .calc-pie{margin-top:calc(var(--u)*5)}
  /* Apilado, la boleta ya no tiene fila que la acompañe: pegarla arriba
     taparía los mandos que el visitante está usando. */
  .boleta{position:static}
  .mo{grid-column:span 6}
  .mo:last-child{grid-column:span 12}
  .sup-t,.sup-l{grid-column:1 / -1}
  .sup-l{margin-top:calc(var(--u)*3)}
}
@media (max-width:760px){
  .calc-vias{grid-template-columns:1fr}
  /* Apilada, la tabla vuelve a ser una ficha por asunto: título, lo que
     te toca a ti y lo que hacemos nosotros, uno debajo de otro. */
  .vs-cab{display:none}
  .vs-q,.vs-a,.vs-b{grid-column:1 / -1}
  .vs-q{padding-bottom:0}
  .vs-a{padding-top:calc(var(--u)*1.25);padding-bottom:calc(var(--u)*1.25)}
  .vs-b{padding:calc(var(--u)*1.5) calc(var(--u)*2);margin-bottom:calc(var(--u)*2.5)}
  .vs-a::before{content:"Por tu cuenta";display:block;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.13em;color:var(--ink-mute);margin-bottom:.25rem}
  .vs-b::before{content:"Con Camelie";display:block;font-size:.7rem;
    text-transform:uppercase;letter-spacing:.13em;color:var(--burdeos);margin-bottom:.25rem}
  .vs-f p{max-width:none}
  .mo,.mo:last-child{grid-column:1 / -1}
  .mo + .mo{margin-top:calc(var(--u)*4)}
  .mo-nota{max-width:none}
}

/* ===== plazos.css ===== */
/* ================= Calculadora de plazos =================
   Va DESPUÉS de calculadora.css porque reutiliza su retícula entera:
   .calc-grid, .calc-mandos, .calc-paso, .calc-n y .calc-ayuda son las mismas
   clases, con los mismos pasos numerados. Aquí solo está lo que esa hoja no
   tiene: los campos de fecha y número, el par de radios con forma de botón,
   las tres tarjetas de resultado y el bloque del aviso legal.

   Sin un color nuevo. La identidad sale de tokens.css y el ámbar del aviso de
   «me falta el calendario de 2028» es el --ojo del sistema, el mismo que usa
   el panel, y no un amarillo inventado para esta página.
   ========================================================= */

/* ---- cinta de cruce entre las dos calculadoras -------------------------- */
/* Las dos herramientas se sostienen entre sí: quien llega buscando una suele
   acabar necesitando la otra. Va pegada bajo la cabecera oscura, sin aire en
   medio, para que se lea como parte de ella y no como un anuncio. */
.cruce{background:var(--mist-2);border-bottom:1px solid var(--line)}
.cruce .shell{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:calc(var(--u)*2) var(--medianil)}
.cruce p{display:flex;align-items:center;gap:.6rem;margin:0;
  color:var(--ink-soft);font-size:.95rem}
.cruce svg{width:20px;height:20px;flex:none;color:var(--burdeos)}
.cruce a{display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;color:var(--burdeos);text-decoration:none}
.cruce a:hover{text-decoration:underline}
.cruce a svg{width:16px;height:16px;color:currentColor}

/* ---- la rejilla --------------------------------------------------------- */
/* .calc-mandos ya trae grid-column:1 / span 6. La columna de resultados ocupa
   el mismo hueco que la boleta de la otra calculadora. */
.pz-res{grid-column:8 / -1}

/* ---- los campos --------------------------------------------------------- */
/* 48px de alto: por encima del mínimo de 44 y alineado con la altura de los
   botones del sitio. El type="date" nativo se queda: su selector de calendario
   es el del sistema operativo, funciona con teclado y no hay que mantenerlo.
   Lo que sí es nuestro es el campo —ver «la fecha», más abajo—. */
.pz-in{width:100%;margin-top:calc(var(--u)*2);padding:0 calc(var(--u)*1.75);
  height:48px;border:1px solid var(--line-fuerte);border-radius:6px;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-mono);font-size:1.05rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
/* Mismo trato que .sel-btn en custom.css: el filete se tiñe y el halo sale de
   un color-mix del propio burdeos, no de un rgba escrito a mano que habría que
   volver a calcular el día que cambie la paleta. */
.pz-in:focus-visible{outline:none;border-color:var(--foco);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--foco) 16%, transparent)}
.pz-in::placeholder{color:var(--ink-mute)}
/* Sin las flechitas del number: se cuentan días con el teclado, y el incremento
   de uno en uno no tiene sentido cuando el salto típico es de 5, 10 o 30. */
.pz-in[type=number]{-moz-appearance:textfield;appearance:textfield}
.pz-in[type=number]::-webkit-outer-spin-button,
.pz-in[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* El filete se aviva al pasar por encima: es lo que dice «esto se toca». El
   foco manda sobre el hover y por eso va después, arriba. */
.pz-in:hover:not(:focus){border-color:var(--ink-soft)}

/* ---- la fecha ----------------------------------------------------------- */
/* El panel que se abre es el del navegador y así se queda. De todo eso, lo
   único que llega a cruzar es `accent-color`: Chrome pinta con él el día
   elegido, que de fábrica sale azul de sistema y aquí queda en burdeos. Donde
   no esté soportado se ve el azul de siempre y no se rompe nada.

   `color-scheme:light` va por lo mismo: con el sistema en oscuro, el panel
   nativo salía negro colgando de una página clara. (En :root ya está, pero el
   panel mira el del propio campo.)

   Las reglas ::-webkit-* solo las entiende Chrome, Edge y Safari. Firefox pinta
   su propio icono y sus propios huecos, y ahí el campo se queda con el borde,
   la altura y el foco, que es lo que de verdad lo hace parte del sitio. */
.pz-in[type=date]{accent-color:var(--burdeos);color-scheme:light;
  padding-right:calc(var(--u)*.75);font-variant-numeric:tabular-nums}
.pz-in[type=date]::-webkit-datetime-edit{padding:0}
/* Vacío es «dd-mm-aaaa»: un rótulo, no un dato, y se pinta como tal. El campo
   lleva `required`, así que mientras no haya fecha está :invalid; en cuanto la
   hay pasa a la tinta normal, sin una línea de JavaScript. */
.pz-in[type=date]:invalid::-webkit-datetime-edit{color:var(--ink-mute)}
.pz-in[type=date]::-webkit-datetime-edit-text{padding:0 .12em;color:var(--ink-mute)}
/* El hueco que se está escribiendo. El sistema lo marca con su azul; aquí es el
   rosa tenue de las opciones elegidas del resto del sitio. */
.pz-in[type=date]::-webkit-datetime-edit-day-field:focus,
.pz-in[type=date]::-webkit-datetime-edit-month-field:focus,
.pz-in[type=date]::-webkit-datetime-edit-year-field:focus{
  outline:none;border-radius:4px;padding:0 .14em;
  background:var(--rosa-tenue);color:var(--burdeos)}
/* El icono. El del navegador es un dibujo gris fijo que no se puede recolorear:
   se apaga con `background` y se vuelve a dibujar como máscara, igual que el
   tick de .sel-opt en custom.css, para que salga del token y no de un hex.
   La caja mide 40x44 y el dibujo 20: el área que se pulsa es la de un botón de
   verdad aunque el calendario se vea pequeño. */
.pz-in[type=date]::-webkit-calendar-picker-indicator{
  width:40px;height:44px;padding:0;margin:0;cursor:pointer;opacity:1;
  background:var(--ink-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E") center/20px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:background .18s var(--ease)}
.pz-in[type=date]:hover::-webkit-calendar-picker-indicator,
.pz-in[type=date]::-webkit-calendar-picker-indicator:hover{background:var(--burdeos)}

/* ---- sumar o restar ----------------------------------------------------- */
/* Son dos radios de verdad, no un botón con JavaScript: sin JS esto tiene que
   seguir eligiéndose y seguir viajando en la URL del enlace compartido. El
   input se esconde del ojo pero no del teclado, y el foco se pinta sobre el
   <span>, que es lo que se ve. */
.pz-op{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
  margin-top:calc(var(--u)*2)}
.pz-op label{margin:0}
.pz-op input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pz-op span{display:grid;place-items:center;min-height:48px;padding:0 .75rem;
  border:1px solid var(--line-fuerte);border-radius:6px;background:var(--paper);
  color:var(--ink-soft);font-weight:600;font-size:.95rem;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.pz-op span:hover{border-color:var(--ink)}
.pz-op input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pz-op input:focus-visible + span{outline:2px solid var(--foco);outline-offset:2px}

.pz-go{margin-top:calc(var(--u)*5);width:100%;justify-content:center}
/* La nota del enlace compartible se empuja al pie de la columna para que las
   dos columnas cierren a la misma altura, igual que .calc-pie en la otra. */
.pz-share{margin:calc(var(--u)*2) 0 0;padding-top:calc(var(--u)*2);
  border-top:1px solid var(--line);
  color:var(--ink-mute);font-size:.85rem;line-height:1.5}

/* ---- estado vacío ------------------------------------------------------- */
.pz-vacio{display:grid;place-items:center;text-align:center;
  min-height:320px;padding:calc(var(--u)*5);
  border:1px dashed var(--line-fuerte);border-radius:12px;background:var(--mist)}
.pz-vacio svg{width:40px;height:40px;color:var(--ink-mute)}
.pz-vacio h2{margin:calc(var(--u)*2) 0 .5rem;font-size:1.35rem;color:var(--ink)}
.pz-vacio p{margin:0;max-width:38ch;color:var(--ink-soft);font-size:.95rem}

/* ---- la cabecera del resultado ------------------------------------------ */
.pz-res-cab h2{margin:0;font-size:1.2rem;line-height:1.4;font-weight:500;
  color:var(--ink-soft)}
.pz-res-cab h2 b{font-weight:700;color:var(--ink)}
.pz-res-cab p{margin:.5rem 0 0;color:var(--ink-mute);font-size:.9rem}

/* ---- el aviso de año sin calendario ------------------------------------- */
/* Ámbar y no rojo: el resultado está servido y es utilizable, lo que falta es
   la confirmación de unos feriados. Rojo aquí sería decir que algo se rompió. */
.pz-aviso{display:flex;gap:.7rem;align-items:flex-start;
  margin:calc(var(--u)*3) 0 0;padding:calc(var(--u)*2);
  border:1px solid var(--ojo-line);border-radius:8px;background:var(--ojo-bg);
  color:var(--ojo);font-size:.9rem;line-height:1.5}
.pz-aviso svg{width:20px;height:20px;flex:none;margin-top:1px}

/* ---- las tres tarjetas -------------------------------------------------- */
/* auto-fit y no un número fijo de columnas: en su columna de la derecha caben
   apiladas, y cuando la rejilla se derrumba a una sola columna las tres se
   ponen en fila solas, sin una media query que lo diga. */
.pz-r-grid{display:grid;gap:var(--medianil);margin-top:calc(var(--u)*3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pz-r{display:flex;flex-direction:column;padding:calc(var(--u)*3);
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  box-shadow:var(--shadow-sm)}
/* El modo judicial es el que más se equivoca la gente —el sábado cuenta— y por
   eso es el único con filete de marca: destaca la respuesta menos evidente. */
.pz-r[data-modo=judiciales]{border-left:3px solid var(--burdeos)}
.pz-r-t{margin:0;font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.pz-r-dia{margin:calc(var(--u)*1.5) 0 0;font-size:.95rem;color:var(--ink-soft)}
/* La fecha es la respuesta: es el tipo más grande de la tarjeta, con las cifras
   en la mono para que las tres se alineen leídas en columna. */
.pz-r-f{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:.15rem 0 0;
  font-family:var(--font-grotesk);font-size:1.6rem;font-weight:700;
  line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.pz-r-f span{font-family:var(--font-mono);font-size:1.1rem;font-weight:400;
  color:var(--ink-mute)}
.pz-r-d{margin:calc(var(--u)*2) 0 0;color:var(--ink-soft);font-size:.9rem;line-height:1.5}
/* Los feriados saltados con su nombre son lo que hace verificable el resultado:
   sin ellos la fecha es un número que hay que creerse. */
.pz-r-fer{list-style:none;margin:calc(var(--u)*1.5) 0 0;padding:0;
  font-size:.85rem;line-height:1.6;color:var(--ink-soft)}
.pz-r-fer li{padding-left:1rem;position:relative}
.pz-r-fer li::before{content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--burdeos)}
.pz-r-fer b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
.pz-r-pro{display:flex;gap:.6rem;align-items:flex-start;
  margin:calc(var(--u)*2) 0 0;padding:calc(var(--u)*1.5);
  border-radius:8px;background:var(--teal-soft);
  color:var(--teal);font-size:.85rem;line-height:1.5}
.pz-r-pro svg{width:18px;height:18px;flex:none;margin-top:1px}
/* La ley se pega al fondo para que las tres tarjetas la tengan a la misma
   altura aunque una lleve tres feriados listados y otra ninguno. */
.pz-r-ley{margin:auto 0 0;padding-top:calc(var(--u)*2.5);
  border-top:1px solid var(--line);
  font-size:.8rem;color:var(--ink-mute)}

/* ---- cómo funciona ------------------------------------------------------ */
.pz-como-grid{display:grid;gap:var(--medianil);margin-top:calc(var(--u)*5);
  grid-template-columns:repeat(3,1fr)}
.pz-como-c{padding:calc(var(--u)*3);border-radius:12px;background:var(--mist);
  box-shadow:var(--hairline)}
.pz-como-c h3{margin:0 0 .6rem;font-size:1.1rem;color:var(--ink)}
.pz-como-c p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.pz-como-ej{margin-top:calc(var(--u)*2) !important;padding-top:calc(var(--u)*2);
  border-top:1px solid var(--line)}
.pz-como-ej b{color:var(--ink)}
.pz-como-ley{margin-top:calc(var(--u)*2) !important;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-mute) !important}

/* ---- aviso legal -------------------------------------------------------- */
/* En tamaño normal y dentro del flujo, no en letra de mosca al pie. Un estudio
   que publica una fecha de vencimiento asume una responsabilidad real, y
   esconder la advertencia es peor que no ponerla. */
.pz-legal{padding-top:0}
.pz-legal-caja{padding:calc(var(--u)*5);border-radius:14px;
  background:var(--cream);box-shadow:var(--hairline)}
.pz-legal-caja h2{margin:0 0 .75rem;font-size:1.35rem;color:var(--ink)}
.pz-legal-caja p{margin:0;color:var(--ink-soft);line-height:1.65;max-width:78ch}
.pz-legal-caja ul{margin:calc(var(--u)*2) 0 0;padding:0;list-style:none;
  display:grid;gap:.75rem;max-width:78ch}
.pz-legal-caja li{padding-left:1.25rem;position:relative;
  color:var(--ink-soft);line-height:1.6}
.pz-legal-caja li::before{content:"";position:absolute;left:0;top:.65em;
  width:6px;height:6px;border-radius:50%;background:var(--burdeos)}
.pz-legal-caja li b{color:var(--ink)}
.pz-legal-cierre{margin-top:calc(var(--u)*3) !important}
.pz-legal-cierre a{color:var(--burdeos);font-weight:600}

/* ---- responsivo --------------------------------------------------------- */
@media (max-width:1000px){
  .pz-res{grid-column:1 / -1;margin-top:calc(var(--u)*6)}
  .pz-como-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .cruce .shell{flex-direction:column;align-items:flex-start;gap:.5rem}
  .pz-como-grid{grid-template-columns:1fr}
  .pz-legal-caja{padding:calc(var(--u)*3)}
  /* Apiladas: en un teléfono las tres tarjetas se leen una tras otra, que es
     además el orden en que se explican más abajo. */
  .pz-r-grid{grid-template-columns:1fr}
}

/* ===== formulario.css ===== */
/* ===== formulario conectado a la API ===== */

/* La trampa antirrobots. `display:none` no sirve: muchos robots lo detectan y
   saltan el campo. Se saca de la pantalla y se quita del recorrido del tabulador
   (tabindex="-1" en el HTML), que es lo que la hace invisible para una persona
   sin delatar que es una trampa. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* El aviso de éxito ya existía; ahora también hace de aviso de error. */
.form-ok.is-error{background:#FBEDEC;border-color:var(--burdeos);color:var(--burdeos)}

.campo-error{margin:.35rem 0 0;font-size:.8rem;line-height:1.5;color:var(--burdeos)}
.field input[aria-invalid=true],
.field textarea[aria-invalid=true]{border-color:var(--burdeos);
  box-shadow:0 0 0 3px rgba(134,28,26,.13)}

/* Mientras se envía, el botón deja de responder y lo dice. */
.btn:disabled{opacity:.65;cursor:progress;transform:none}
.btn:disabled:hover{transform:none}