/* estilos.css · dictamen.cl (reglas C2 a C6). Cuatro bloques: tokens, base, componentes, utilidades. Los NOMBRES de los tokens son los de la base de sitio; los VALORES son los del manual de marca de Dictamen. Radio de esquina cero, sin degradados, sin sombras: la jerarquía la hacen el peso tipográfico y el espacio. */ /* ===== 1. Tokens ===== */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-wght.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')} :root{ color-scheme:light; /* color (manual de marca): tinta, grafito, tinte, papel, blanco, borde, negativo */ --color-fondo:#F1F4F6; --color-texto:#16324F; --color-texto-suave:#46525E; --color-acento:#16324F; --color-linea:#D3DBE1; --color-foco:#16324F; --color-tinte:#D9E1E8; --color-blanco:#FFFFFF; --color-negativo:#AEBECB; /* tipografía */ --fuente-texto:'IBM Plex Sans',system-ui,sans-serif; --fuente-titulos:'IBM Plex Sans',system-ui,sans-serif; --fuente-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --t-menor:.8125rem; --t-cuerpo:1rem; --t-1:1.1875rem; --t-2:1.25rem; --t-3:1.5rem; --t-4:1.75rem; --t-5:2.25rem; --t-6:clamp(2.125rem,5.2vw,3.25rem); --lh-titular:1.15; --lh-cuerpo:1.6; /* espacio */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --ancho-lectura:68ch; --ancho-max:1200px; /* forma: radio cero en todo el sitio, incluidos botones, tarjetas e inputs */ --r1:0; --r2:0; /* sombras y degradados en la paleta (decisión de Manuel del 21-09-2026, deroga el «sin sombras» de la identidad para este sitio) */ --sombra-1:0 1px 2px rgba(22,50,79,.06),0 8px 24px rgba(22,50,79,.06); --sombra-2:0 2px 4px rgba(22,50,79,.08),0 20px 48px rgba(22,50,79,.14); --tinta-profunda:#0F2438; --tinta-clara:#1C3F63; --degradado-tinta:linear-gradient(160deg,var(--tinta-clara),var(--tinta-profunda)); --cuadricula:linear-gradient(to right,rgba(22,50,79,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(22,50,79,.045) 1px,transparent 1px); /* movimiento */ --dur-1:150ms; --dur-2:200ms; --dur-3:320ms; --ease:cubic-bezier(.2,0,.2,1); } /* ===== 2. Base ===== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:80px;scroll-behavior:smooth} body{margin:0;background:var(--color-fondo);color:var(--color-texto);font:var(--t-cuerpo)/var(--lh-cuerpo) var(--fuente-texto);text-wrap:pretty} h1,h2,h3,h4{font-family:var(--fuente-titulos);font-weight:600;line-height:var(--lh-titular);text-wrap:balance;margin:0 0 var(--e4)} h1{font-size:var(--t-6);letter-spacing:-.025em} h2{font-size:var(--t-4);letter-spacing:-.015em} h3{font-size:var(--t-2)} h4{font-size:var(--t-cuerpo)} p{margin:0 0 var(--e4);max-width:var(--ancho-lectura)} ul,ol{margin:0 0 var(--e4);padding-left:1.25em} a{color:var(--color-acento);text-underline-offset:3px;text-decoration-thickness:1px} img,svg,video{max-width:100%;height:auto;display:block} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--color-foco);outline-offset:2px;box-shadow:0 0 0 6px rgba(22,50,79,.12);transition:box-shadow var(--dur-1) var(--ease)} main:focus{outline:none} table{border-collapse:collapse} .mono,code,.cifra{font-family:var(--fuente-mono);font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} @media (min-width:900px){:root{--t-cuerpo:1.0625rem}} /* ===== 3. Componentes ===== */ .saltar{position:absolute;left:var(--e4);top:-100px;padding:var(--e2) var(--e4);background:var(--color-fondo);color:var(--color-texto);border:1px solid var(--color-texto);z-index:40} .saltar:focus{top:var(--e4)} /* Cabecera pegajosa: logotipo + botón siempre visibles; los enlaces en una segunda fila en móvil */ .cabecera{position:sticky;top:0;z-index:20;background:var(--color-fondo);border-bottom:1px solid var(--color-linea);transition:background-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)} html.desplazado .cabecera{background:rgba(241,244,246,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(22,50,79,.08)} .cabecera-interior{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--e4);row-gap:var(--e2);padding:var(--e3) 20px;max-width:var(--ancho-max);margin:0 auto} .logotipo{display:inline-flex;align-items:center;gap:var(--e3);text-decoration:none;color:var(--color-texto);min-height:44px} .logotipo svg{width:28px;height:28px;flex:none} .logotipo-nombre{font-weight:600;font-size:var(--t-1);letter-spacing:-.01em;line-height:1} .logotipo-bajada{display:none;font-family:var(--fuente-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-texto-suave);line-height:1;padding-left:var(--e3);border-left:1px solid var(--color-linea)} .menu{grid-column:1 / -1;grid-row:2;overflow-x:auto;-webkit-overflow-scrolling:touch} .menu ul{display:flex;gap:var(--e4);list-style:none;margin:0;padding:0;white-space:nowrap} .menu a{display:inline-block;text-decoration:none;color:var(--color-texto-suave);padding:var(--e2) 0;font-weight:500;font-size:.875rem;border-bottom:2px solid transparent;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)} .menu a:hover,.menu a[aria-current=page]{color:var(--color-texto);border-color:var(--color-texto)} .cabecera .boton{grid-column:2;grid-row:1;padding-inline:var(--e4);min-height:40px;padding-block:var(--e2)} /* Secciones: 64px de aire en móvil, 96 en escritorio; fondo papel o blanco alternado */ .seccion{padding:var(--e8) 20px} .seccion-interior{max-width:var(--ancho-max);margin:0 auto} .seccion-blanca{background:var(--color-blanco)} .seccion-tinta,.bloque-tinta{background:var(--degradado-tinta);color:var(--color-fondo);position:relative;isolation:isolate} .seccion-tinta::before,.bloque-tinta::before,.encabezado::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(241,244,246,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(241,244,246,.05) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent)} .seccion-tinta a,.bloque-tinta a{color:var(--color-fondo)} .seccion-tinta .texto-suave,.bloque-tinta .texto-suave,.seccion-tinta .etiqueta,.bloque-tinta .etiqueta,.seccion-tinta .bajada,.bloque-tinta .bajada,.seccion-tinta .nota,.bloque-tinta .nota{color:var(--color-negativo)} .seccion-tinta .etiqueta::after,.bloque-tinta .etiqueta::after{background:var(--color-negativo)} .etiqueta{font-family:var(--fuente-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-texto-suave);margin:0 0 var(--e5);line-height:1} .etiqueta::after{content:"";display:block;width:40px;height:2px;background:var(--color-texto);margin-top:var(--e3);transform-origin:left;transition:transform .8s var(--ease) .2s} .etiqueta.revelar::after{transform:scaleX(0)} .etiqueta.revelar.visible::after{transform:scaleX(1)} .bajada{font-size:var(--t-1);color:var(--color-texto-suave);line-height:1.55} .texto-suave{color:var(--color-texto-suave)} .nota{font-size:var(--t-menor);color:var(--color-texto-suave);line-height:1.5} .destacado{font-weight:500;color:var(--color-texto);border-left:2px solid var(--color-texto);padding-left:var(--e5);margin-block:var(--e5)} /* Botones: fondo tinta, radio cero, 44px táctiles; hover a 88 % */ .boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:48px;padding:var(--e3) var(--e6);border:1px solid var(--color-texto);background:var(--color-texto);color:var(--color-fondo);text-decoration:none;font-weight:500;cursor:pointer;touch-action:manipulation;text-align:center;box-shadow:0 1px 2px rgba(22,50,79,.18);transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)} .boton:active{transform:translateY(0)} .boton-secundario{background:transparent;color:var(--color-texto);box-shadow:none} @media (hover:hover) and (pointer:fine){.boton:hover{opacity:.92;transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,50,79,.24)} .boton-secundario:hover{opacity:1;background:var(--color-tinte)}} .boton:disabled{opacity:.6;cursor:default} .seccion-tinta .boton,.bloque-tinta .boton{background:var(--color-fondo);color:var(--color-texto);border-color:var(--color-fondo)} .seccion-tinta .boton-secundario,.bloque-tinta .boton-secundario{background:transparent;color:var(--color-fondo)} .acciones{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)} .acciones .boton{flex:1 1 auto} .enlace-flecha{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor} .enlace-flecha::after{content:" \2192"} .enlace-flecha:hover{border-bottom-width:2px} /* Portada (H-02): texto a la izquierda, isotipo grande que se dibuja al cargar a la derecha */ .portada{padding:var(--e7) 20px var(--e8);overflow:hidden;background-image:radial-gradient(70% 90% at 90% 45%,rgba(217,225,232,.95),rgba(241,244,246,0) 70%),var(--cuadricula);background-size:auto,48px 48px,48px 48px;position:relative} .portada::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to bottom,rgba(241,244,246,0),var(--color-fondo));pointer-events:none} .portada-interior{display:grid;gap:var(--e6);max-width:var(--ancho-max);margin:0 auto;align-items:center} .portada h1{margin-bottom:var(--e5)} .posicionamiento{font-size:var(--t-menor);color:var(--color-texto-suave);margin-top:var(--e5)} .isotipo-grande{color:var(--color-tinte);width:min(280px,60vw);justify-self:end;margin-right:-10%;filter:drop-shadow(0 24px 40px rgba(22,50,79,.12));will-change:transform} .isotipo-grande path,.isotipo-grande rect{stroke-dasharray:1;stroke-dashoffset:1;animation:trazar 600ms var(--ease) forwards} .isotipo-grande .horizontal{animation-delay:0ms} .isotipo-grande .vertical{animation-delay:180ms} .isotipo-grande .perfilado{animation-delay:360ms} .isotipo-grande .perfilado{stroke-dasharray:38;stroke-dashoffset:38} .isotipo-grande .solido{stroke:none;opacity:0;animation:aparecer 320ms var(--ease) 560ms forwards} @keyframes trazar{to{stroke-dashoffset:0}} @keyframes aparecer{to{opacity:1}} /* Portada: titular por líneas y libro mayor en vivo (decisión de Manuel, 21-09-2026) */ .portada h1 .linea{display:inline-block;opacity:0;transform:translateY(.45em);animation:subir .7s var(--ease) forwards} .portada h1 .linea:nth-child(2){animation-delay:.18s} .portada h1 .linea:nth-child(3){animation-delay:.36s} .portada .bajada,.portada .acciones,.portada .posicionamiento,.portada .etiqueta{opacity:0;animation:subir .7s var(--ease) .5s forwards} .portada .etiqueta{animation-delay:0s} @keyframes subir{to{opacity:1;transform:none}} .libro-vivo{background:var(--color-blanco);border:1px solid var(--color-linea);box-shadow:var(--sombra-2);font-family:var(--fuente-mono);font-size:var(--t-menor);width:100%;max-width:540px;justify-self:end;position:relative;opacity:0;animation:subir .6s var(--ease) .35s forwards} .libro-cabecera{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);border-bottom:1px solid var(--color-linea);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-texto-suave)} .en-linea{display:inline-flex;align-items:center;gap:var(--e2);white-space:nowrap} .en-linea::before{content:"";width:8px;height:8px;background:var(--color-texto);animation:latir 2.4s ease-in-out infinite} @keyframes latir{0%,100%{opacity:1}50%{opacity:.2}} .asientos{list-style:none;margin:0;padding:0} .asiento{display:grid;grid-template-columns:3.75rem 1fr auto;gap:var(--e3);align-items:center;padding:var(--e3) var(--e4);border-bottom:1px solid var(--color-linea);transition:opacity .3s var(--ease)} .asiento:nth-child(even){background:var(--color-fondo)} .asiento .cifra{font-weight:500;font-size:var(--t-2);line-height:1;color:var(--color-texto)} .asiento .cifra small{display:block;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-texto-suave);font-weight:500;margin-bottom:2px} .concepto{font-family:var(--fuente-texto);color:var(--color-texto);line-height:1.35} .sello{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--color-texto);padding:3px 6px;color:var(--color-texto);white-space:nowrap;transition:opacity .25s var(--ease),transform .25s var(--ease)} .libro-vivo.animando .asiento{opacity:0} .libro-vivo.animando .asiento.escrito{opacity:1} .libro-vivo.animando .concepto::after{content:"";display:inline-block;width:2px;height:1em;background:var(--color-texto);vertical-align:-.15em;margin-left:2px;animation:latir .8s steps(2) infinite} .libro-vivo.animando .asiento.sellado .concepto::after{display:none} .libro-vivo.animando .sello{opacity:0;transform:scale(1.5)} .libro-vivo.animando .asiento.sellado .sello{opacity:1;transform:none} .cierre{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:var(--e4) var(--e4) var(--e3)} .cierre::before{content:"";position:absolute;left:var(--e4);right:var(--e4);top:0;height:3px;background:var(--color-texto);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)} .cierre::after{content:"";position:absolute;left:50%;top:0;height:calc(100% - 2.6rem);width:3px;margin-left:-1.5px;background:var(--color-texto);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease) .5s} .libro-vivo.cerrado .cierre::before,html:not(.js) .cierre::before{transform:scaleX(1)} .libro-vivo.cerrado .cierre::after,html:not(.js) .cierre::after{transform:scaleY(1)} .libro-vivo.animando .cierre > *{opacity:0;transition:opacity .4s var(--ease) .9s} .libro-vivo.cerrado .cierre > *{opacity:1} .lado{display:grid;gap:var(--e1);padding-top:var(--e3);font-family:var(--fuente-texto);color:var(--color-texto);justify-items:start} .lado:nth-child(2){padding-left:var(--e4);justify-items:end;text-align:right} .etiqueta-lado{font-family:var(--fuente-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-texto-suave)} .lado .bloque{width:14px;height:12px;background:var(--color-texto)} .lado:nth-child(2) .bloque{background:transparent;border:2px solid var(--color-texto)} .calza{grid-column:1 / -1;text-align:center;font-family:var(--fuente-texto);color:var(--color-texto-suave);padding-top:var(--e3);margin:0;max-width:none;font-weight:500} @media (prefers-reduced-motion:reduce){.portada h1 .linea,.portada .bajada,.portada .acciones,.portada .posicionamiento,.portada .etiqueta,.libro-vivo{opacity:1;transform:none;animation:none} .libro-vivo.animando .asiento,.libro-vivo.animando .sello,.libro-vivo.animando .cierre > *{opacity:1;transform:none} .en-linea::before{animation:none}} /* Cuenta T: dos columnas que tienen que calzar (motivo del isotipo) */ .cuenta-t{display:grid;margin-top:var(--e6);position:relative;padding-top:4px} .cuenta-t::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--color-texto),var(--color-texto-suave));transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .1s} .cuenta-t.visible::before,html:not(.js) .cuenta-t::before{transform:scaleX(1)} .cuenta-t > div{padding:var(--e5) 0} .cuenta-t h3{font-size:var(--t-cuerpo);margin-bottom:var(--e4)} .cuenta-t .lado-perfilado{color:var(--color-texto-suave);border-bottom:1px solid var(--color-linea)} .cuenta-t .lado-solido{font-weight:500} .cuenta-t ul{list-style:none;padding:0;margin:0} .cuenta-t li{padding:var(--e3) 0;border-top:1px solid var(--color-linea);max-width:var(--ancho-lectura)} .cuenta-t li:first-child{border-top:0} .cuenta-t .etiqueta{margin-bottom:var(--e3)} .cuenta-t .etiqueta::after{display:none} /* Lista marcada: guion en grafito, sin viñetas redondas */ .lista-marcada{list-style:none;padding:0;margin:0 0 var(--e5)} .lista-marcada li{position:relative;padding:var(--e3) 0 var(--e3) var(--e5);border-top:1px solid var(--color-linea);max-width:var(--ancho-lectura)} .lista-marcada li::before{content:"";position:absolute;left:0;top:calc(var(--e3) + .75em);width:12px;height:2px;background:var(--color-texto-suave)} .lista-marcada li:last-child{border-bottom:1px solid var(--color-linea)} .lista-compacta li{padding-block:var(--e2)} /* Libro: filas tipo libro mayor (calendario del mes, compromisos) */ .libro{list-style:none;padding:0;margin:0;border-top:1px solid var(--color-linea)} .libro li{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--e4);padding:var(--e4) 0;border-bottom:1px solid var(--color-linea);align-items:baseline} .libro .cifra{font-size:var(--t-4);font-weight:500;line-height:1;color:var(--color-texto)} .libro .cifra small{display:block;font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-texto-suave);margin-bottom:var(--e1)} .libro strong{display:block;font-weight:500} .libro p{margin:0;color:var(--color-texto-suave)} .libro li:nth-child(even){background:var(--color-tinte);margin-inline:calc(-1 * var(--e4));padding-inline:var(--e4)} .bloque-tinta .libro,.bloque-tinta .libro li{border-color:rgba(174,190,203,.35)} .bloque-tinta .libro .cifra,.bloque-tinta .libro strong{color:var(--color-fondo)} .bloque-tinta .libro p,.bloque-tinta .libro .cifra small{color:var(--color-negativo)} .bloque-tinta .libro li:nth-child(even){background:transparent;margin-inline:0;padding-inline:0} /* Selector de plan (solo con JavaScript; sin él la tabla de planes se lee igual) */ .selector{border:1px solid var(--color-texto);background:var(--color-blanco);padding:var(--e5) 20px;margin:var(--e6) 0;box-shadow:var(--sombra-1)} html.js form.selector{display:grid;gap:var(--e5)} .selector legend{font-weight:600;font-size:var(--t-2);padding:0;margin-bottom:var(--e4)} .selector fieldset{border:0;padding:0;margin:0;min-width:0} .selector-campos{display:grid;gap:var(--e4)} .campo{display:grid;gap:var(--e1)} .campo label,.campo > span{font-size:var(--t-menor);font-weight:500;color:var(--color-texto-suave)} .campo input,.campo select{min-height:48px;padding:var(--e2) var(--e3);border:1px solid var(--color-linea);background:var(--color-blanco);width:100%;font-family:var(--fuente-mono);font-variant-numeric:tabular-nums;transition:border-color var(--dur-1) var(--ease)} .campo input:hover,.campo select:hover{border-color:var(--color-texto)} .campo input:focus-visible,.campo select:focus-visible{outline-offset:0} .campo select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316324F' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--e3) center;background-size:14px;padding-right:var(--e7)} .resultado{border-top:4px solid var(--color-texto);padding-top:var(--e4)} .resultado-plan{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e3)} .resultado-nombre{font-weight:600;font-size:var(--t-3);transition:opacity var(--dur-2) var(--ease)} .resultado-monto{font-family:var(--fuente-mono);font-variant-numeric:tabular-nums;font-size:var(--t-5);font-weight:500;line-height:1;transition:opacity var(--dur-2) var(--ease)} .resultado-monto small{font-size:var(--t-menor);font-weight:400;color:var(--color-texto-suave);margin-left:var(--e2)} .resultado.cambiando .resultado-nombre,.resultado.cambiando .resultado-monto{opacity:.35} .desglose{list-style:none;padding:0;margin:var(--e4) 0 0;font-size:var(--t-menor);color:var(--color-texto-suave)} .desglose li{display:flex;justify-content:space-between;gap:var(--e4);padding:var(--e2) 0;border-top:1px solid var(--color-linea)} .desglose .cifra{color:var(--color-texto);white-space:nowrap} .desglose .total{font-weight:500;color:var(--color-texto);border-top-width:2px} .resultado .nota{margin:var(--e4) 0 0} /* Planes: cuatro tarjetas de estructura idéntica; Completo destacado */ .planes{display:grid;gap:var(--e4);list-style:none;padding:0;margin:0 0 var(--e6)} .plan{background:var(--color-blanco);border:1px solid var(--color-linea);padding:var(--e5) 20px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:var(--e4);position:relative;box-shadow:var(--sombra-1);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} @media (hover:hover) and (pointer:fine){.plan:hover,.adicional:hover{transform:translateY(-4px);box-shadow:var(--sombra-2)}} .plan-destacado{border:2px solid var(--color-texto);box-shadow:var(--sombra-2)} .plan-destacado::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:5px;background:linear-gradient(90deg,var(--tinta-clara),var(--color-texto-suave))} .plan.activo{border:2px solid var(--color-texto);box-shadow:0 0 0 4px rgba(22,50,79,.14),var(--sombra-2)} .plan-marca{position:absolute;top:0;right:0;font-family:var(--fuente-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;background:var(--color-texto);color:var(--color-fondo);padding:var(--e1) var(--e2);line-height:1.4} .plan h3{margin:0;font-size:var(--t-2)} .plan-precio{font-family:var(--fuente-mono);font-variant-numeric:tabular-nums;font-size:1.75rem;font-weight:500;line-height:1;margin:0} .plan-precio small{display:block;font-size:var(--t-menor);font-weight:400;color:var(--color-texto-suave);margin-top:var(--e2);font-family:var(--fuente-texto)} .plan-limites{list-style:none;padding:0;margin:0;font-size:var(--t-menor);border-top:1px solid var(--color-linea)} .plan-limites li{display:flex;justify-content:space-between;gap:var(--e3);padding:var(--e2) 0;border-bottom:1px solid var(--color-linea)} .plan-limites span:first-child{color:var(--color-texto-suave)} .plan-limites .cifra{text-align:right;font-weight:500} .plan-suma{margin:0} .plan-suma h4{font-family:var(--fuente-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-texto-suave);margin:0 0 var(--e2)} .plan-suma ul{list-style:none;padding:0;margin:0;font-size:var(--t-menor)} .plan-suma li{position:relative;padding:var(--e1) 0 var(--e1) var(--e4)} .plan-suma li::before{content:"";position:absolute;left:0;top:calc(var(--e1) + .7em);width:8px;height:2px;background:var(--color-texto-suave)} .plan .boton{width:100%} .recargos{display:grid;gap:var(--e4);border:1px solid var(--color-linea);background:var(--color-blanco);padding:var(--e5) 20px;box-shadow:var(--sombra-1)} .recargos h3{margin:0} /* Pasos numerados, unidos por una regla a la altura de los números */ .pasos{list-style:none;padding:0;margin:var(--e6) 0 0;display:grid;gap:var(--e6);counter-reset:paso;position:relative} .pasos li{position:relative;padding-left:var(--e7);counter-increment:paso} .pasos li::before{content:"0" counter(paso);position:absolute;left:0;top:0;font-family:var(--fuente-mono);font-size:var(--t-4);font-weight:500;line-height:1;color:var(--color-texto)} .pasos strong{display:block;font-weight:600;font-size:var(--t-2);margin-bottom:var(--e2);line-height:var(--lh-titular)} .pasos p{margin-bottom:var(--e2)} .condiciones{border:1px solid var(--color-linea);padding:var(--e5) 20px;margin-top:var(--e6);background:var(--color-blanco);box-shadow:var(--sombra-1)} .condiciones p:last-child{margin:0} /* Socia: retrato o su lugar, más credenciales */ .socia{display:grid;gap:var(--e6)} .retrato-lugar{aspect-ratio:3/4;max-width:360px;border:1px solid var(--color-linea);background:linear-gradient(160deg,var(--color-tinte),var(--color-fondo));box-shadow:var(--sombra-1);display:grid;place-content:center;justify-items:center;padding:var(--e5);text-align:center;color:var(--color-texto-suave);font-size:var(--t-menor);margin:0} .retrato-lugar svg{width:64px;height:64px;color:var(--color-negativo);margin-bottom:var(--e4)} .credenciales{list-style:none;padding:0;margin:var(--e5) 0;border-top:1px solid var(--color-linea);max-width:var(--ancho-lectura)} .credenciales li{padding:var(--e3) 0;border-bottom:1px solid var(--color-linea);font-family:var(--fuente-mono);font-size:var(--t-menor)} .credenciales li span{display:block;font-family:var(--fuente-texto);color:var(--color-texto-suave)} .formacion{background:var(--color-tinte);padding:var(--e5);margin-block:var(--e5)} .formacion .credenciales{margin:0;border-color:rgba(22,50,79,.15)} .formacion .credenciales li{border-color:rgba(22,50,79,.15)} /* Metodología numerada (sin íconos) */ .metodo{list-style:none;padding:0;margin:0;counter-reset:metodo;display:grid;gap:0;border-top:1px solid var(--color-linea)} .metodo li{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--e4);padding:var(--e5) 0;border-bottom:1px solid var(--color-linea);counter-increment:metodo} .metodo li::before{content:"0" counter(metodo);font-family:var(--fuente-mono);font-size:var(--t-4);font-weight:500;line-height:1;color:var(--color-texto)} .metodo strong{display:block;font-weight:600;font-size:var(--t-2);margin-bottom:var(--e2);line-height:var(--lh-titular)} .metodo p{margin:0} /* Adicionales con ícono del sistema (48px, trazo 4, escuadra) */ .adicionales{display:grid;gap:var(--e4);list-style:none;padding:0;margin:0 0 var(--e5)} .adicional{background:var(--color-blanco);border:1px solid var(--color-linea);padding:var(--e5) 20px;box-shadow:var(--sombra-1);transition:box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} .adicional svg{width:48px;height:48px;color:var(--color-texto);margin-bottom:var(--e4);transition:transform var(--dur-3) var(--ease)} .adicional:hover svg{transform:translateY(-3px)} .adicional h3{font-size:var(--t-2)} .adicional p{margin:0;color:var(--color-texto-suave)} /* Tabla de detalle (servicios): filas alternadas, cifras a la derecha */ .tabla{overflow-x:auto;margin:0 0 var(--e5)} .tabla table{width:100%;font-size:var(--t-menor)} .tabla th,.tabla td{text-align:left;padding:var(--e3) var(--e3);border-bottom:1px solid var(--color-linea);vertical-align:top} .tabla th{font-weight:500;color:var(--color-texto-suave)} .tabla tbody tr:nth-child(even){background:var(--color-tinte)} .tabla .cifra{text-align:right;white-space:nowrap;font-weight:500} /* Encabezado de página interior sobre tinta */ .encabezado{background:var(--degradado-tinta);color:var(--color-fondo);padding:var(--e8) 20px;position:relative;isolation:isolate} .encabezado .bajada{color:var(--color-negativo)} .encabezado .etiqueta{color:var(--color-negativo)} .encabezado .etiqueta::after{background:var(--color-negativo)} /* Formulario: etiquetas arriba, 48px, radio cero, error con borde y texto */ .formulario{display:grid;gap:var(--e4);max-width:640px} .formulario p{margin:0;display:grid;gap:var(--e1);max-width:none} .formulario label{font-size:var(--t-menor);font-weight:500;color:var(--color-texto-suave)} .formulario input,.formulario textarea,.formulario select{min-height:48px;padding:var(--e3);border:1px solid var(--color-linea);background:var(--color-blanco);width:100%;transition:border-color var(--dur-1) var(--ease)} .formulario input:hover,.formulario textarea:hover,.formulario select:hover{border-color:var(--color-texto)} .formulario input:focus-visible,.formulario textarea:focus-visible,.formulario select:focus-visible{outline-offset:0} .formulario input:user-invalid,.formulario select:user-invalid,.formulario textarea:user-invalid{border:2px solid var(--color-texto)} .formulario select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316324F' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--e3) center;background-size:14px;padding-right:var(--e7)} .formulario fieldset{border:0;padding:var(--e4);margin:0;background:var(--color-tinte);display:grid;gap:var(--e4);min-width:0} .formulario legend{font-weight:600;padding:0;float:left;width:100%;margin-bottom:var(--e3)} .formulario legend + p{clear:both} .formulario-aviso{font-weight:500;padding:var(--e3);border:2px solid var(--color-texto)} .formulario-aviso:empty{display:none} .formulario .boton{width:100%} .contacto{display:grid;gap:var(--e6)} .oculto{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .legal h2{margin-top:var(--e6)} .legal .nota{font-size:var(--t-menor);color:var(--color-texto-suave)} .tabla-cookies{overflow-x:auto} .tabla-cookies table{border-collapse:collapse;width:100%;font-size:var(--t-menor)} .tabla-cookies th,.tabla-cookies td{text-align:left;padding:var(--e2);border-bottom:1px solid var(--color-linea);vertical-align:top} /* Pie sobre tinta, tres columnas en escritorio */ .pie{background:var(--color-texto);color:var(--color-fondo);padding:var(--e7) 20px} .pie-interior{max-width:var(--ancho-max);margin:0 auto;display:grid;gap:var(--e6)} .pie a{color:var(--color-fondo)} .pie .logotipo{color:var(--color-fondo)} .pie .logotipo-bajada{display:block;border:0;padding:0;color:var(--color-negativo);margin-top:var(--e2)} .pie .logotipo{display:grid;gap:0;justify-items:start} .pie-enlaces{list-style:none;margin:0;padding:0;display:grid;gap:var(--e2)} .pie-enlaces a,.pie .enlace{text-decoration:none;color:var(--color-fondo);border-bottom:1px solid transparent;transition:border-color var(--dur-1) var(--ease)} .pie-enlaces a:hover,.pie .enlace:hover{border-color:var(--color-fondo)} .pie-legal{font-size:var(--t-menor);color:var(--color-negativo);margin:0} .pie-legal .mono{color:var(--color-fondo)} .pie-titulo{font-family:var(--fuente-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-negativo);margin:0 0 var(--e3)} .enlace{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;touch-action:manipulation;border-bottom:1px solid transparent} /* Aviso de cookies (regla 5; lo crea consentimiento.js). Sin id de Tag Manager no aparece. */ .aviso-cookies[hidden]{display:none} .aviso-cookies{position:fixed;left:20px;right:20px;bottom:20px;z-index:30;max-width:640px;margin:0 auto;padding:var(--e4) var(--e5);background:var(--color-blanco);color:var(--color-texto);border:1px solid var(--color-texto);font-size:var(--t-menor);opacity:0;transform:translateY(8px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} .aviso-cookies.visible{opacity:1;transform:none} .aviso-cookies p{margin:0 0 var(--e3);max-width:56ch} .aviso-cookies-acciones{display:flex;flex-wrap:wrap;gap:var(--e3)} .aviso-cookies .boton{flex:1 1 auto;text-align:center} @media (prefers-reduced-motion:reduce){.aviso-cookies{transform:none}} @media print{.aviso-cookies,.saltar,.cabecera .boton{display:none}} /* ===== 4. Utilidades y puntos de quiebre (mobile-first: 600, 900, 1200) ===== */ /* display:revert y no display:initial: «initial» para display es «inline», así que en un div rompe el bloque entero. «revert» devuelve el valor por omisión del navegador para ese elemento. (17-09-2026) OJO con el reverso (18-09-2026): «revert» devuelve el valor del NAVEGADOR, no el de tu componente. En un