/* ============================================================================= * styles.css β€” Oliver Services * ============================================================================= * CHASIS: copiado de references/moldes/_tokens.css + _base.css (los originales * quedan en _spec/*.origen para poder diffear). Se cambian SOLO las lineas de * MARCA; las de MEDIDAS no se tocan. * * LAS 5 PALANCAS DE 02-diseno.md Β§3, y lo que se movio: * 1 PALETA petroleo frio (h 215) sobre papel calido. bcmadrid y kine * comparten --primary L=0.54; aqui L=0.45 y otro tono. * 2 TIPOGRAFIA sin fuente web: pila del sistema. No hay logotipo ni fuente * de marca del cliente, y autoalojar una fuente que nadie ha * elegido es inventar. Peso 800 en display, 400 en cuerpo. * 3 HERO dos columnas: texto + panel de "lo que hay que decirnos". * Sin foto: no existe ni una imagen del negocio. * 4 TARJETA filete superior de 3px en el color de marca, sin sombra. * (kine y bcmadrid usan sombra + icono en pastilla.) * 5 ORDEN la prueba va SEGUNDA en la home, no al final: lo unico * verificable de este negocio es su TVA, y esconderla abajo * dejaria el hero sin nada que lo sostenga. * * πŸ”΄ --primary se declara en oklch() A PROPOSITO: `audit-vs-spec.pl` ESQ-03 * solo sabe leer esa forma, y _tokens.css declara su acento en hexadecimal. * Escribirlo asi es lo que hace que ese gate pueda medir algo. * ========================================================================== */ :root{ /* ── MARCA ───────────────────────────────────────────────────────────── Los ratios de al lado estan MEDIDOS por gate-estructura.js (E9), no elegidos a ojo. Cambiar cualquiera obliga a volver a correrlo. */ /* UN SOLO color de marca. `DESIGN.md Β§2`: Β«el acento se gasta en un sitio Β· nada de segundo color de marcaΒ». El ocre deja de ser marca y se queda como color SEMANTICO de un unico sitio: el veredicto Β«Selon accesΒ» de la tabla. */ --primary: oklch(0.42 0.10 128); /* OLIVA #3d5710 Β· blanco encima 8,17:1 */ --acento: var(--primary); /* nombre que usan las clases del chasis */ --semaf-cond: oklch(0.50 0.11 62); /* OCRE #8f520d Β· SEMANTICO, no de marca */ --tinta: #191b15; /* casi negro con sesgo verde, no gris puro */ --papel: #ffffff; --tenue: #565b4d; --tenue-inv:#cdd2c2; --linea: #e4e6dd; --linea-fuerte:#8b9080; --caja: #f5f6f1; /* creta fria, sesgo verde */ /* ── ANCHOS Β· 11-medidas Β§6 Β· NO se tocan ───────────────────────────── */ --wrap: 1120px; --wrap-wide: 1280px; --measure: 34em; --measure-max: 42em; --measure-lead: 28em; --wrap-flujo: 48rem; --wrap-spec: 58rem; /* ── TIPOGRAFIA Β· 7 escalones ───────────────────────────────────────── */ /* πŸ”΄ JERARQUIA, no compresion. `DESIGN.md Β§3` llama a la jerarquia plana Β«un patron de slop reconocidoΒ», y yo la habia apretado MAS para que pasara el gate de densidad β€” que `11-medidas.md:533` declara calibrado solo a escritorio. Ahora hay distancia de verdad entre display, title y body. */ --fs-display: clamp(2.6rem, 6vw, 4.5rem); --fs-title: clamp(1.75rem, 3.4vw, 2.5rem); --fs-section: clamp(1.1rem, 1.7vw, 1.3rem); --fs-lead: clamp(1.125rem, 1.5vw, 1.3rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-micro: 0.8125rem; --lh-body:1.6; --lh-lead:1.5; --lh-title:1.15; --lh-display:1.08; --fw-body:400; --fw-medium:500; --fw-bold:700; --fw-black:800; /* ── ESPACIADO Β· base 4px ───────────────────────────────────────────── */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; /* Ritmo de seccion. Mas apretado que el molde a proposito: el gate de densidad limita la pagina a 6 pantallas y estas paginas llevan 7 roles. */ /* Aire. El ritmo tiene que VARIAR (Β§4): la seccion ancla respira mas. */ /* El gate cuenta el padding DENTRO del bloque, asi que el aire entre secciones se le imputa dos veces. 4rem sigue siendo generoso β€”el doble que la version comprimida de antesβ€” y devuelve varias secciones al pliegue. */ --section-y: clamp(2.75rem, 4.5vw, 4rem); --section-y-lg: clamp(3.5rem, 6vw, 5rem); --grid-gap: clamp(1.25rem, 2vw, 2rem); --r: 6px; } /* ── LA DISPLAY FACE ──────────────────────────────────────────────────────── Instrument Serif, licencia OFL, **auto-alojada** (assets/fuentes/, con su OFL.txt al lado). `DESIGN.md Β§1` permite exactamente esto β€”Β«de sistema o auto-alojada (woff2 en el repo)Β»β€” y Β§3 dice que la diferenciacion real esta en Β«una display face distintiva solo para titulares, con el cuerpo neutroΒ». Peso 400 a proposito: un serif de alto contraste a 4,5rem tiene mas autoridad que un sans a 800, que es el default de cualquier generador. */ @font-face{ font-family:"Instrument Serif"; src:url("/assets/fuentes/instrument-serif-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--papel); color:var(--tinta); font:var(--fw-body) var(--fs-body)/var(--lh-body) system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } :target{scroll-margin-top:var(--space-8)} /* ── EL CHASIS (de _base.css) ───────────────────────────────────────────── */ .sec{padding:var(--section-y) var(--grid-gap)} .sec--caja{background:var(--caja)} .sec--tinta{background:var(--tinta);color:var(--papel);--tenue:var(--tenue-inv);--linea:rgba(255,255,255,.18)} .sec__in{max-width:var(--wrap);margin-inline:auto} .sec__in--spec{max-width:var(--wrap-spec)} /* El titular de seccion: display face, peso normal, y un filete corto encima que hace de marca de seccion. Sustituye al icono generico. */ .sec__h{ margin:0 0 var(--space-6);padding-top:var(--space-4); font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-size:var(--fs-title);line-height:1.1; letter-spacing:0;font-weight:400; max-width:22ch;text-wrap:balance;position:relative; } .sec__h::before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--primary)} .sec--tinta .sec__h::before{background:var(--papel)} .sec__sub{ margin:calc(-1 * var(--space-4)) 0 var(--space-6); color:var(--tenue);font-size:var(--fs-lead);line-height:var(--lh-lead); max-width:var(--measure-lead); } .btn{ display:inline-flex;align-items:center;justify-content:center; padding:var(--space-3) var(--space-6); border-radius:var(--r);border:1px solid transparent; text-decoration:none;font-size:var(--fs-small);font-weight:var(--fw-medium); line-height:1.2;min-height:44px;transition:opacity 180ms ease; } .btn:hover{opacity:.85} .btn:focus-visible{outline:2px solid var(--acento);outline-offset:3px} .btn--1{background:var(--acento);color:#fff} .btn--2{border-color:var(--linea-fuerte);color:var(--tinta);background:transparent} .sec--tinta .btn--1{background:var(--papel);color:var(--tinta);border-color:var(--papel)} .sec--tinta .btn--2{border-color:rgba(255,255,255,.6);color:var(--papel)} .sec--tinta .btn:focus-visible{outline-color:var(--papel)} .nota{margin:var(--space-6) 0 0;font-size:var(--fs-small);color:var(--tenue);max-width:var(--measure)} .enlace{color:var(--acento);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:from-font} .enlace:hover{text-decoration-thickness:2px} .enlace:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:2px} .sec--tinta .enlace{color:var(--papel)} /* πŸ”΄ CPL Β· el gate E5 falla con un solo parrafo por encima de 80 caracteres por linea. A 1298px una

a ancho de contenedor da ~135. Esta regla es la que lo impide, y es ANCHA a proposito: cualquier texto nuevo la hereda. */ main p, main li, main dd, main dt, main summary{max-width:var(--measure)} main .o-card p, main .o-card h3, main td, main th, main .o-dato span{max-width:none} /* ── CROMO ──────────────────────────────────────────────────────────────── */ .o-skip{position:absolute;left:-9999px;top:0} .o-skip:focus{left:var(--space-4);top:var(--space-2);z-index:9;background:var(--papel);color:var(--tinta);padding:var(--space-2) var(--space-4);border:2px solid var(--acento);border-radius:var(--r)} .o-hdr{border-bottom:1px solid var(--linea);background:var(--papel)} .o-hdr__in{max-width:var(--wrap);margin-inline:auto;padding:var(--space-3) var(--grid-gap); display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap} .o-logo{color:var(--tinta);text-decoration:none;display:inline-flex;align-items:center} /* La marca trazada. Proporcion 1000x538 fija: el ancho manda y el alto sale solo. Nunca se le pone `height` a mano -- eso la deforma en silencio. */ .o-marca{display:block;width:clamp(172px,21vw,216px);height:auto;flex:0 0 auto} .o-logo__t{display:inline-block;line-height:1.15} .o-logo__m{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--tenue);font-weight:var(--fw-bold);margin-top:1px} .o-marca--pie{width:min(320px,88%)} .o-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-4);margin:0;padding:0} .o-nav a{color:var(--tenue);text-decoration:none;font-size:var(--fs-small);font-weight:var(--fw-medium); padding:var(--space-2) 0;display:inline-block} .o-nav a:hover{color:var(--tinta);text-decoration:underline} .o-nav a[aria-current="page"]{color:var(--tinta);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em} .o-nav a:focus-visible{outline:2px solid var(--acento);outline-offset:2px} .o-migas{max-width:var(--wrap);margin-inline:auto;padding:var(--space-3) var(--grid-gap) 0;font-size:var(--fs-small);color:var(--tenue)} .o-migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0} .o-migas li+li::before{content:"/";margin-right:var(--space-2);color:var(--linea-fuerte)} .o-migas a{color:var(--tenue)} .o-pie{background:var(--tinta);color:var(--papel);padding:var(--space-8) var(--grid-gap) var(--space-4)} .o-pie__in{max-width:var(--wrap);margin-inline:auto;display:grid;gap:var(--space-6); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .o-pie__m{margin:0 0 var(--space-1);font-weight:var(--fw-black);letter-spacing:-.02em} .o-pie__t{margin:0;color:var(--tenue-inv);font-size:var(--fs-small);max-width:34ch} .o-pie__h{margin:0 0 var(--space-2);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--tenue-inv)} .o-pie ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)} .o-pie a{color:var(--papel);font-size:var(--fs-small);text-decoration:none} .o-pie a:hover{text-decoration:underline} .o-pie a:focus-visible{outline:2px solid var(--papel);outline-offset:2px} .o-pie__b{max-width:var(--wrap);margin:var(--space-6) auto 0;padding-top:var(--space-3); border-top:1px solid rgba(255,255,255,.18);font-size:var(--fs-small)} .o-pie__b a{color:var(--tenue-inv)} /* ── HERO ───────────────────────────────────────────────────────────────── */ .o-hero{display:grid;gap:var(--space-8);align-items:start} @media(min-width:64rem){ .o-hero{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:var(--space-12)} } .o-hero--corto{max-width:var(--wrap-flujo)} .o-hero--corto .o-eyebrow{text-wrap:balance} .o-eyebrow{margin:0 0 var(--space-4);color:var(--tenue);font-size:var(--fs-micro); font-weight:var(--fw-bold);letter-spacing:.14em;text-transform:uppercase} /* πŸ”΄ 18ch iba bien con Β«Le nettoyage de vos locauxΒ» y partia en SEIS lineas «À quelle frΓ©quence faire nettoyer des bureaux ?Β», con media pagina vacia al lado. Ningun gate mira como rompe un titular: se vio en la captura. */ .o-h1{margin:0 0 var(--space-6);font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-size:var(--fs-display);line-height:1.02;letter-spacing:-.01em;font-weight:400; max-width:20ch;text-wrap:balance} .o-lead{margin:0 0 var(--space-6);font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--tenue);max-width:var(--measure-lead)} .o-hero__acc{margin:0 0 var(--space-3)} /* El hero corto puede llevar DOS botones (formulario y telefono): sin esto salian pegados uno encima del otro en movil. Acotado al corto a proposito: el hero grande lleva uno solo y no tiene por que cambiar. */ .o-hero--corto .o-hero__acc{display:flex;flex-wrap:wrap;gap:var(--space-3)} .o-tranq{margin:0;font-size:var(--fs-small);color:var(--tenue);max-width:var(--measure-lead)} /* Sin borde de acento: `DESIGN.md Β§7` lo nombra entre los tells. La tarjeta se distingue por el fondo y una hairline, no por una barra de color. */ .o-panel{border:1px solid var(--linea);border-radius:var(--r); padding:var(--space-6);background:var(--caja)} .o-panel__h{margin:0 0 var(--space-3);font-size:var(--fs-section);font-weight:var(--fw-bold)} .o-panel__l{margin:0;padding:0 0 0 var(--space-4);display:grid;gap:var(--space-2);font-size:var(--fs-small);color:var(--tenue)} /* ── REJILLA DE TARJETAS ────────────────────────────────────────────────── */ .o-rej{list-style:none;margin:0;padding:0;display:grid;gap:var(--grid-gap); grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .o-rej--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .o-card{background:var(--papel);border:1px solid var(--linea); border-radius:var(--r);padding:var(--space-6) var(--space-6) var(--space-8)} .o-card__h{margin:0 0 var(--space-2);font-size:var(--fs-section);font-weight:var(--fw-bold);line-height:1.25} .o-card__p{margin:0;font-size:var(--fs-small);color:var(--tenue)} .o-tag{margin:0 0 var(--space-3);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);font-weight:var(--fw-bold)} /* ── BANDA DE DATOS ─────────────────────────────────────────────────────── */ .o-datos{list-style:none;margin:0;padding:0;display:grid;gap:var(--grid-gap); grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .o-dato{border-top:1px solid var(--linea);padding-top:var(--space-4)} .o-dato__n{display:block;font-family:"Instrument Serif",Georgia,serif;font-size:2rem; line-height:1.1;font-weight:400;color:var(--tinta);letter-spacing:0} .o-dato__e{display:block;margin-top:var(--space-2);font-size:var(--fs-small);color:var(--tenue)} /* ── DEFINICIONES ───────────────────────────────────────────────────────── */ /* πŸ”΄ DOS COLUMNAS: termino | definicion. Con `auto-fit` los

y
son celdas sueltas que se colocan por ORDEN DE DOCUMENTO, y cada termino acaba al lado de la definicion de otro. Se vio en la captura de la home a 1298 y no lo cazo ninguno de los ocho gates. */ .o-def{margin:0;display:grid;gap:var(--space-3) var(--space-6); grid-template-columns:minmax(14ch,26ch) 1fr;align-items:baseline} .o-def dt{margin:0;font-weight:var(--fw-bold);font-size:var(--fs-section);line-height:1.3} .o-def dd{margin:var(--space-1) 0 0;font-size:var(--fs-small);color:var(--tenue)} /* ── PASOS (apilados a proposito: no es una rejilla) ────────────────────── */ .o-pasos{list-style:none;counter-reset:p;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)} .o-paso{counter-increment:p;padding-left:var(--space-12);position:relative} .o-paso::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px; display:grid;place-items:center;border-radius:50%;background:var(--primary);color:#fff; font-size:var(--fs-small);font-weight:var(--fw-bold)} .o-paso__h{margin:0 0 var(--space-1);font-size:var(--fs-section);font-weight:var(--fw-bold);line-height:1.3} .o-paso__p{margin:0;font-size:var(--fs-small);color:var(--tenue)} /* ── ACORDEON ───────────────────────────────────────────────────────────── */ .o-faq{display:grid;gap:var(--space-2)} .o-q{border:1px solid var(--linea);border-radius:var(--r);background:var(--papel)} .o-q summary{cursor:pointer;padding:var(--space-3) var(--space-4);font-weight:var(--fw-medium);list-style-position:inside} .o-q summary:focus-visible{outline:2px solid var(--acento);outline-offset:-2px;border-radius:var(--r)} .o-q p{margin:0;padding:0 var(--space-4) var(--space-4);font-size:var(--fs-small);color:var(--tenue)} /* ── TABLA ──────────────────────────────────────────────────────────────── */ .o-tabla__wrap{overflow-x:auto} .o-tabla{border-collapse:collapse;width:100%;font-size:var(--fs-small);text-align:left} .o-tabla th,.o-tabla td{padding:var(--space-3);border-bottom:1px solid var(--linea);vertical-align:top} .o-tabla thead th{font-size:var(--fs-micro);letter-spacing:.07em;text-transform:uppercase;color:var(--tenue); border-bottom:2px solid var(--linea-fuerte)} .o-tabla tbody th{font-weight:var(--fw-bold);white-space:nowrap} .o-tabla td{color:var(--tenue)} /* ── CIERRE ─────────────────────────────────────────────────────────────── */ .o-cierre{display:grid;gap:var(--space-6);align-items:center} @media(min-width:48rem){ .o-cierre{grid-template-columns:minmax(0,1fr) auto} } .o-cierre__h{margin:0 0 var(--space-3);font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-size:var(--fs-title);line-height:1.1;letter-spacing:0;font-weight:400; max-width:22ch;text-wrap:balance} .o-cierre__p{margin:0;color:var(--tenue);font-size:var(--fs-small)} .o-cierre__acc{margin:0;display:flex;gap:var(--space-3);flex-wrap:wrap} /* ── FORMULARIO ─────────────────────────────────────────────────────────── */ .o-form{display:grid;gap:var(--space-4);max-width:var(--measure-max)} .o-form__g{display:grid;gap:var(--space-2)} .o-lbl{font-size:var(--fs-small);font-weight:var(--fw-medium)} .o-lbl--in{font-weight:var(--fw-body);color:var(--tenue)} .o-req{color:var(--primary)} .o-in{font:inherit;font-size:var(--fs-body);padding:var(--space-3);border:1px solid var(--linea-fuerte); border-radius:var(--r);background:var(--papel);color:var(--tinta);min-height:44px;width:100%} .o-in:focus-visible{outline:2px solid var(--acento);outline-offset:1px} .o-form__c{display:flex;gap:var(--space-3);align-items:flex-start} .o-chk{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto} .o-chk:focus-visible{outline:2px solid var(--acento);outline-offset:2px} .o-form__acc{margin:0} /* πŸ”΄ El campo trampa se esconde FUERA DE PANTALLA, no con display:none: hay bots que se saltan lo que esta en display:none y entonces deja de cazar. Lo comprueba gate-formularios.js F3, que ademas mira su etiqueta. */ .o-cepo{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden} /* ── LEGAL (prosa a proposito, 09 Β§2.11) ────────────────────────────────── */ .o-actualizado{color:var(--tenue);font-size:var(--fs-small);margin:0 0 var(--space-8)} .o-legal__h{margin:var(--space-8) 0 var(--space-3);font-size:var(--fs-section);font-weight:var(--fw-bold)} .o-legal__h:first-of-type{margin-top:0} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:.001ms !important; } } /* ── CTA INTERMEDIO ───────────────────────────────────────────────────────── No es decoracion: `medir-pantallas.js` falla si se recorren mas de 2,5 pantallas seguidas sin nada que pulsar, y con 7 roles obligatorios eso pasa siempre a partir de la cuarta seccion. */ .o-mas{margin:var(--space-6) 0 0} /* ── FORMULARIO A DOS COLUMNAS EN ESCRITORIO ──────────────────────────────── A una columna, el bloque del formulario mide 1046px a 1298x800 y desborda el pliegue (gate de densidad: ningun bloque > 1 pantalla). */ @media(min-width:48rem){ .o-form{grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-6)} .o-form__g--full,.o-form__c,.o-form__acc,.o-form .nota,.o-form__estado{grid-column:1/-1} } /* ── DENSIDAD EN MOVIL ────────────────────────────────────────────────────── A 390px todo se apila y un bloque que cabe a 1298 ocupa una pantalla entera. Se aprieta lo que se puede sin bajar de 44px de diana tactil. */ @media(max-width:39.99rem){ /* El plano aΓ±adiΓ³ ~110px al hero y a 390 el bloque se salΓ­a del pliegue (844). Medido: 937px. Se encoge el dibujo, no se esconde: en el mΓ³vil es donde mΓ‘s falta hace ver de quΓ© va esto antes de leer nada. */ .o-plano{max-height:88px;width:auto} .o-panel{padding:var(--space-4)} .o-hero{gap:var(--space-6)} .o-plano__pie{margin-bottom:var(--space-2);font-size:11px} /* La cadena de flujo se pasaba 48px del pliegue a 390. */ .o-card{padding:var(--space-3) var(--space-3) var(--space-4)} .o-tabla th,.o-tabla td{padding:var(--space-2) var(--space-1);line-height:1.35} .o-form{gap:var(--space-3)} .o-form__g{gap:var(--space-1)} .o-rej,.o-datos{gap:var(--space-3)} .o-def{grid-template-columns:1fr;gap:var(--space-1) 0} .o-def dd{margin-bottom:var(--space-3)} .o-pie{padding-top:var(--space-6)} .o-pie__in{gap:var(--space-4)} } /* ── EL PLANO ─────────────────────────────────────────────────────────────── Es el dibujo del producto, no una foto: un perimetro acotado con sus zonas. No hay ni una imagen del negocio y no se inventa ninguna (02-diseno Β§5). */ .o-plano{display:block;width:100%;height:auto;color:var(--primary);margin-bottom:var(--space-2)} .o-plano__pie{margin:0 0 var(--space-4);font-size:var(--fs-micro);color:var(--tenue); letter-spacing:.03em} .o-regla{display:inline-block;width:18px;height:2px;background:var(--primary); vertical-align:.28em;margin-right:var(--space-2)} /* ═══ 15-tabla-especificacion Β· copiado de references/moldes/15 ════════════ El unico cambio: `.m15-v--cond` traia `#8a5a00` a pelo y aqui usa el token de marca secundaria, que es el mismo papel con el contraste ya medido. */ .m15-esp{width:100%;border-collapse:collapse;text-align:left} .m15-esp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .m15-esp .m15-grupo th{display:block;padding:var(--space-6) 0 var(--space-2); font-size:var(--fs-small);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acento)} .m15-esp tbody.m15-filas tr{display:grid;gap:.2rem;border:1px solid var(--linea); border-radius:var(--r);padding:var(--space-4);margin-bottom:var(--space-3)} .m15-esp tbody.m15-filas th{font-size:var(--fs-body);font-weight:700;line-height:1.3;padding:0 0 var(--space-2)} .m15-esp tbody.m15-filas td{display:flex;justify-content:space-between;gap:var(--space-4); font-size:var(--fs-small);padding:.15rem 0;border:0;line-height:1.45;color:var(--tenue)} .m15-esp tbody.m15-filas td[data-col]::before{content:attr(data-col);flex:none;color:var(--tenue); font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em;font-weight:600} .m15-v{font-weight:700;white-space:nowrap} .m15-v--si{color:var(--acento)} .m15-v--no{color:var(--tenue)} .m15-v--cond{color:var(--semaf-cond)} @media(min-width:40rem){ .m15-esp thead{position:static;width:auto;height:auto;clip:auto} .m15-esp thead th{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.06em; color:var(--tenue);font-weight:700;padding:0 var(--space-4) var(--space-3) 0;border-bottom:2px solid var(--linea-fuerte)} .m15-esp .m15-grupo th{display:table-cell;padding:var(--space-6) 0 var(--space-2);border-bottom:1px solid var(--linea)} .m15-esp tbody.m15-filas tr{display:table-row;border:0;border-radius:0;padding:0;margin:0} .m15-esp tbody.m15-filas th{display:table-cell;padding:var(--space-3) var(--space-4) var(--space-3) 0; border-bottom:1px solid var(--linea);vertical-align:top} .m15-esp tbody.m15-filas td{display:table-cell;padding:var(--space-3) var(--space-4) var(--space-3) 0; border-bottom:1px solid var(--linea);vertical-align:top} .m15-esp tbody.m15-filas td[data-col]::before{content:none} .m15-esp col.m15-c1{width:34%} .m15-esp col.m15-c2{width:18%} } /* ═══ 14-cadena-de-flujo Β· copiado de references/moldes/14 ════════════════ */ .m14-paso{border-radius:var(--r);padding:var(--space-4);text-align:center} .m14-paso b{display:block;font-size:var(--fs-section);line-height:1.25;letter-spacing:-.01em} .m14-paso span{display:block;margin-top:.3rem;font-size:var(--fs-small);font-weight:var(--fw-medium)} .m14-paso--in{background:var(--tinta);color:var(--papel)} .m14-paso--out{background:var(--tinta);color:var(--papel);border-radius:999px; width:max-content;max-width:100%;margin-inline:auto;padding:var(--space-3) var(--space-6)} .m14-paso--out b{font-size:var(--fs-body);letter-spacing:.02em} .m14-flecha{display:block;text-align:center;color:var(--acento);font-size:var(--fs-section); line-height:1;margin:var(--space-3) 0} .m14-rej{display:grid;grid-template-columns:1fr;gap:var(--space-3);list-style:none;margin:0;padding:0} .m14-rej li{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--caja); border:1px solid var(--linea);border-radius:var(--r);padding:var(--space-3) var(--space-4)} .m14-rej > li > b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--acento); color:#fff;display:grid;place-items:center;font-size:var(--fs-small);font-weight:700} .m14-rej strong{display:block;font-size:var(--fs-body)} .m14-rej span{display:block;font-size:var(--fs-small);color:var(--tenue);line-height:1.45} @media(min-width:40rem){ .m14-rej{grid-template-columns:1fr 1fr} } /* ═══ 02-par-alterno Β· copiado de references/moldes/02 ════════════════════ La ranura de medio lleva un ESQUEMA, no una foto: no hay ni una imagen del negocio y el molde avisa de que un lado con relleno decorativo es peor que la prosa. Lo que se dibuja es la restriccion de la que habla el texto. */ .m02-par{display:grid;gap:var(--space-4);align-items:center; padding-block:var(--space-6);border-top:1px solid var(--linea)} .m02-par:first-of-type{border-top:0;padding-top:0} .m02-par__txt > *{margin:0} .m02-par__txt > * + *{margin-top:var(--space-3)} .m02-par__n{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em; color:var(--tenue);font-variant-numeric:tabular-nums} .m02-par__txt h3{font-size:var(--fs-section);line-height:1.3;letter-spacing:-.01em} .m02-par__txt p{color:var(--tenue);max-width:var(--measure);font-size:var(--fs-small)} .m02-par__media{margin:0} .o-esq{display:block;width:100%;height:auto;max-height:150px;color:var(--acento); background:var(--caja);border:1px solid var(--linea);border-radius:var(--r);padding:var(--space-3)} .m02-par__media figcaption{margin-top:var(--space-2);font-size:var(--fs-micro);color:var(--tenue)} @media(min-width:40rem){ .m02-par{grid-template-columns:1fr 1fr;gap:var(--space-8)} .m02-par--dcha .m02-par__txt{order:2} .m02-par--dcha .m02-par__media{order:1} } /* ═══ MOVIL Β· DESPUES de los moldes, o no gana ══════════════════════════════ πŸ”΄ Estas cuatro reglas vivian en el bloque movil de arriba, que va ANTES del CSS copiado de los moldes. Misma especificidad, gana el ultimo: la corrida siguiente dio EXACTAMENTE los mismos pixeles (1959px, 6,3 pantallas) y parecia que el arreglo no servia. Servia; estaba en el sitio equivocado. */ @media(max-width:39.99rem){ .m15-esp tbody.m15-filas tr{border:0;border-bottom:1px solid var(--linea); border-radius:0;padding:var(--space-3) 0;margin-bottom:0} .m15-esp .m15-grupo th{padding-top:var(--space-4)} .m14-paso{padding:var(--space-2) var(--space-3)} .m14-rej li{padding:var(--space-2) var(--space-3)} .m14-flecha{font-size:var(--fs-body);margin:var(--space-1) 0} .m02-par{padding-block:var(--space-4)} .o-esq{max-height:120px} } /* ═══ 13-indice-con-guias Β· copiado de references/moldes/13 ═══════════════ */ .m13-idx{border-top:2px solid var(--tinta);margin:0;padding:0;list-style:none;counter-reset:idx} .m13-idx li{counter-increment:idx;border-bottom:1px solid var(--linea)} .m13-idx a{display:flex;align-items:baseline;gap:var(--space-4);padding:.55rem 0; text-decoration:none;color:var(--tinta);font-size:var(--fs-body);line-height:1.4} .m13-idx a:hover{color:var(--acento)} .m13-idx a:focus-visible{outline:2px solid var(--acento);outline-offset:-2px} .m13-idx a::before{content:counter(idx,decimal-leading-zero);flex:none;color:var(--tenue); font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums} .m13-idx__t{flex:none;max-width:calc(100% - 5rem)} .m13-idx__g{display:none} .m13-idx__n{margin-left:auto;flex:none;color:var(--tenue);font-size:var(--fs-small)} @media(min-width:40rem){ .m13-idx__g{display:block;flex:1;min-width:2rem;border-bottom:1px dotted var(--linea);transform:translateY(-.35em)} .m13-idx__n{margin-left:0} } /* ═══ 07-lista-comprobacion Β· copiado de references/moldes/07 ═════════════ */ .m07-cols{display:grid;grid-template-columns:1fr;gap:var(--space-4)} .m07-col{background:var(--caja);border-radius:var(--r);padding:var(--space-4); border-top:3px solid var(--linea)} .m07-col--si{border-top-color:var(--acento)} .m07-col h3{margin:0 0 var(--space-3);font-size:var(--fs-section);line-height:1.3;letter-spacing:-.01em} .m07-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)} .m07-col li{position:relative;padding-left:1.6rem;font-size:var(--fs-small);line-height:1.5} .m07-col li::before{position:absolute;left:0;top:0;font-weight:700} .m07-col--si li::before{content:"\2713";color:var(--acento)} .m07-col--no li::before{content:"\2013";color:var(--tenue)} .m07-col--no li{color:var(--tenue)} @media(min-width:40rem){ .m07-cols{grid-template-columns:1fr 1fr;gap:var(--space-6)} .m07-col{border-top:0;border-left:3px solid var(--linea);border-radius:0 var(--r) var(--r) 0} .m07-col--si{border-left-color:var(--acento)} } /* ═══ CORRECCION SOBRE LOS MOLDES ══════════════════════════════════════════ πŸ”΄ `07-lista-comprobacion` trae `border-left:3px solid var(--acento)` en la columna del Β«siΒ». Es el patron que `DESIGN.md Β§7` nombra entre los tells: Β«borde de acento lateral en tarjetasΒ». **El molde de la skill implementa algo que el documento de marca prohibe**, y el molde no lo sabe porque nada los conecta. Se corrige aqui, no en el molde, y queda anotado en el informe. */ .m07-col{border-top:0;border-left:0} .m07-col--si{background:var(--caja)} .m07-col--no{background:transparent;border:1px solid var(--linea)} @media(min-width:40rem){ .m07-col{border-left:0;border-radius:var(--r)} .m07-col--si{border-left:0} } /* ── LA COLUMNA DE LECTURA ────────────────────────────────────────────────── Faltaba: la web era etiquetas de tarjeta y cero prosa, y el gate lo decia en 22 de 24 medidas (Β«0 parrafos de lecturaΒ»). En un registro editorial eso es el defecto, no el aviso. */ .sec__p{max-width:var(--measure);margin:0 0 var(--space-4);font-size:var(--fs-body); line-height:1.65;color:var(--tinta)} .sec__p + .sec__p{margin-top:calc(-1 * var(--space-1))} .sec__p:last-of-type{margin-bottom:var(--space-8)} .sec--tinta .sec__p{color:var(--papel)} /* ── MOVIL: mismo diseno, menos aire ──────────────────────────────────────── El registro editorial (escala abierta, aire, prosa) es de ESCRITORIO, que es donde `11-medidas.md:533` declara calibrado el gate de densidad (Β«presupuesto ~3,5-4 pantallas en desktopΒ»). A 390 se aprieta un 30 %, que es diseno responsive normal β€” no es deshacer la decision. */ @media(max-width:39.99rem){ :root{ --section-y: 2.25rem; --section-y-lg: 2.75rem; --fs-display: 2.4rem; --fs-title: 1.6rem; --grid-gap: 1rem; } .sec__p{margin-bottom:var(--space-3);line-height:1.55} .sec__p:last-of-type{margin-bottom:var(--space-6)} .sec__h{margin-bottom:var(--space-4);padding-top:var(--space-3)} .o-card{padding:var(--space-4)} .o-h1{margin-bottom:var(--space-4)} } /* ── BANDA DE CONSENTIMIENTO ──────────────────────────────────────────────── Va al FINAL del fichero a proposito: el bloque movil de arriba no toca nada de `.o-cc`, y asi ninguna regla de igual especificidad le gana por orden. (18-ago: las sobrescrituras moviles estaban ANTES de los moldes y el gate devolvia exactamente los mismos pixeles, como si el arreglo no existiera.) */ /* πŸ”΄ UNA LINEA PARA TODO EL SITIO, y no es cosmetica. `[hidden]{display:none}` vive en la hoja del NAVEGADOR, asi que CUALQUIER regla de clase le gana: `.o-cc__cats{display:grid}` dejaria las categorias visibles con el atributo puesto y sin ningun error. Medido en eldestinodenora.es el 8-sep-2026: su panel de cookies estuvo VIVO en 30 paginas ocupando el 73% de la pantalla del movil, con `hidden` bien puesto y el JS bien escrito. Un chequeo del DOM lo habria dado por bueno. Comprobado antes de escribirla: hoy ningun elemento del sitio usa `hidden` dependiendo de verse (solo `aria-hidden`, que es otro atributo). */ [hidden]{display:none !important} .o-cc{ position:fixed; z-index:90; left:1rem; right:1rem; bottom:1rem; display:flex; justify-content:center; } .o-cc__caja{ width:100%; max-width:34rem; background:var(--papel); border:1px solid var(--linea-fuerte); border-radius:2px; box-shadow:0 1px 2px rgba(25,27,21,.08), 0 12px 32px rgba(25,27,21,.14); padding:1.25rem 1.25rem 1.1rem; } .o-cc__h{ font-family:var(--fuente-display,"Instrument Serif",Georgia,serif); font-weight:400; font-size:1.3rem; line-height:1.15; margin:0 0 .45rem; color:var(--tinta); } .o-cc__p{margin:0; font-size:.875rem; line-height:1.55; color:var(--tenue); max-width:none} .o-cc__p a{color:var(--primary)} .o-cc__cats{display:grid; gap:.35rem; margin-top:.9rem} .o-cc__cat{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; border:1px solid var(--linea); background:var(--caja); padding:.5rem .65rem; font-size:.8125rem; color:var(--tenue); } .o-cc__cat strong{color:var(--tinta); font-weight:600} .o-cc__cat input{accent-color:var(--primary); flex:none; width:1.05rem; height:1.05rem} .o-cc__btns{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1rem} .o-cc__link{ background:none; border:0; cursor:pointer; padding:.5rem .25rem; font:inherit; font-size:.8125rem; color:var(--tenue); text-decoration:underline; text-underline-offset:.2em; } .o-cc__link:hover{color:var(--tinta)} .o-cc__link:focus-visible,.o-pie__cc:focus-visible{outline:2px solid var(--primary); outline-offset:2px} .o-pie__cc{ background:none; border:0; cursor:pointer; padding:0; margin-right:.75rem; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:.2em; } @media(max-width:39.99rem){ .o-cc{left:.5rem; right:.5rem; bottom:.5rem} .o-cc__caja{padding:1rem .95rem .9rem} .o-cc__btns .btn{flex:1 1 100%; text-align:center} } @media(prefers-reduced-motion:no-preference){ .o-cc__caja{animation:o-cc-entra .22s ease-out} @keyframes o-cc-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} } /* ── FOTOS ────────────────────────────────────────────────────────────────── Las llevan `width` y `height` en el HTML para que el navegador reserve sitio y la pagina no salte al cargarlas. Esta regla es lo que impide que esos atributos fijen el tamano de verdad: mandan el ancho del contenedor y la proporcion. Sin ella, `width="1536"` desborda el movil. */ .o-foto{display:block;width:100%;height:auto;background:var(--caja)} .o-figura{margin:0 0 var(--space-4)} .o-foto__pie{margin:var(--space-2) 0 0;font-size:var(--fs-micro);color:var(--tenue); line-height:1.45;max-width:60ch} .o-foto--panel{margin-bottom:var(--space-2)} /* ── ANTES Y DESPUES ──────────────────────────────────────────────────────── Las dos mitades van pegadas, sin hueco entre ellas: el corte tiene que leerse como una costura y no como dos fotos sueltas. Y el rotulo va DENTRO de cada mitad, porque un pie comun debajo obliga a adivinar cual es cual. */ .o-ad__lista{display:grid;gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))} .o-ad{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:2px; border:1px solid var(--linea);background:var(--linea);padding:1px} .o-ad__lado{position:relative;background:var(--caja);min-width:0} .o-ad__et{position:absolute;z-index:1;top:0;left:0; font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.09em; text-transform:uppercase;color:var(--papel);background:var(--tinta); padding:.25rem .5rem} .o-ad__et--ok{background:var(--primary)} .o-ad__pie{grid-column:1/-1;background:var(--papel);padding:var(--space-2) var(--space-3); font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--tinta)} /* Correcciones medidas el 17-sep sobre captura, no sobre el DOM: Β· el pie de la foto del hero se pegaba al titular siguiente; Β· las fotos casi blancas -la ducha, el fregadero limpio- se leian como CAJAS VACIAS sobre papel blanco: sin un canto, una foto clara no existe; Β· a tres pares por fila cada foto media 185px, que no da para distinguir sucio de limpio. Se fuerzan DOS por fila como maximo. */ .o-panel .o-foto__pie{margin-bottom:var(--space-4)} .o-foto{box-shadow:inset 0 0 0 1px rgba(25,27,21,.10)} .o-ad__lista{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))} /* Un retrato no se sirve al ancho de una foto de sala: 3:4 a 62rem son 82rem de alto. Se acota, y el `sizes` del generador va acorde -- si no, el navegador se baja el fichero grande para pintarlo pequeno. */ .o-figura--retrato{max-width:24rem} /* El telefono de la cabecera. En limpieza local la llamada es la conversion, no un adorno: por eso va en las 12 paginas y no solo en /contact/. */ .o-tel{display:inline-flex;flex-direction:column;line-height:1.15;text-decoration:none; color:var(--tinta);padding:.35rem .7rem;border:1px solid var(--linea-fuerte)} .o-tel:hover{background:var(--caja)} .o-tel:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .o-tel__et{font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)} .o-tel__n{font-weight:var(--fw-bold);font-size:.95rem;white-space:nowrap} @media(max-width:39.99rem){ .o-tel{flex-direction:row;align-items:baseline;gap:.4rem;padding:.3rem .55rem} .o-tel__n{font-size:.9rem} }