/*
Theme Name: C21 Daniel Ortegon
Template: generatepress
Theme URI: https://asesor.danielortegon.com
Author: Daniel Ortegon
Description: Tema hijo de GeneratePress para la web de Daniel Ortegon, asesor inmobiliario en CENTURY 21 Les Santes (Mataro y el Maresme). No trae diseno: el diseno lo hacen el Personalizador de GeneratePress y GenerateBlocks. Aqui solo viven las fuentes de la marca y los pocos estilos que ningun ajuste cubre.
Version: 2.5.0
License: Uso privado
Text Domain: c21daniel
*/

/* =========================================================================
   POR QUE ESTE FICHERO ES TAN CORTO
   -------------------------------------------------------------------------
   La version anterior tenia 1.015 lineas y 34 secciones, crecidas por
   acumulacion: tres radios distintos, sombras contradictorias y un ritmo
   vertical distinto en cada bloque. Las clases acabaron chocando entre si.

   Ahora el sistema visual vive donde le corresponde:
     · Paleta, tipografia, anchos, cabecera y pie -> Personalizador de GeneratePress
     · Maquetacion de secciones                   -> GenerateBlocks, en el editor
     · Este fichero                               -> las fuentes y cuatro cosas mas

   Antes de anadir una regla aqui, comprobar si un ajuste del Personalizador o
   una opcion de GenerateBlocks ya lo hace. Casi siempre la respuesta es que si.
   ========================================================================= */


/* =========================================================================
   1 · POPPINS, AUTOALOJADA
   Decision de Daniel (11-sep): esta web es la suya como asesor independiente,
   no la web oficial de CENTURY 21. La oficialidad la dan el logo, el copy y la
   estructura; la tipografia es suya.

   POR QUE NO SE CARGA DESDE fonts.googleapis.com, que es lo comodo:
     · RGPD. Pedir la fuente a Google envia la IP del visitante a Google antes
       de que acepte nada. En Alemania ya hay sentencias por eso.
     · Rendimiento. Son dos origenes de terceros mas (googleapis y gstatic) con
       su DNS y su TLS en la ruta critica, y el objetivo es 95 en PageSpeed.

   EL PESO 300 ES EL QUE MANDA EN LOS TITULARES. Medido en Christie's (100),
   Elliman (300), Sotheby's y The Agency (400): las marcas de registro
   patrimonial usan H1 a peso <= 400. La negrita (700+) es el registro de
   Compass y SERHANT, que son tecnologia y medios. El peso ligero comunica que
   la marca no necesita levantar la voz.

   Solo el subconjunto 'latin': el espanol entero —tildes, n, signos de
   apertura— cabe en U+0000-00FF. El latin-ext no hace falta y son 4 ficheros
   menos. Poppins tiene licencia SIL Open Font, asi que autoalojarla es legal.

   Cinco pesos y 38 KB en total, frente a los 224 KB de las cinco fuentes
   corporativas que habia antes.
   ========================================================================= */
@font-face{font-family:'Poppins';src:url('assets/fonts/Poppins-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/Poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/Poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/Poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/Poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}


/* =========================================================================
   2 · PIE LEGAL
   Lo imprime c21_pie_legal() en el gancho generate_credits de GeneratePress.
   Solo necesita tamano: el color y el fondo los pone el Personalizador.
   ========================================================================= */
.c21-legal{
  font-family:'Poppins',Arial,sans-serif;
  font-size:12px;line-height:1.6;letter-spacing:.02em;
  margin:0 0 4px;
}
.c21-legal strong{font-weight:500}


/* =========================================================================
   3 · BLOQUE DE OFICINA   [c21_oficina]
   No se renderiza sin foto Y sin direccion: la regla vive en el shortcode.
   ========================================================================= */
.c21-oficina{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.c21-oficina figure{margin:0}
.c21-oficina img{width:100%;height:auto;display:block;border-radius:6px}
.c21-oficina address{font-style:normal;line-height:1.6}
@media (max-width:768px){.c21-oficina{grid-template-columns:1fr}}


/* =========================================================================
   4 · FORMULARIO DE CONTACTO
   Construido con la skill lead-form-ux: una sola pantalla, campos minimos,
   antispam sin captcha y los tres consentimientos por separado.

   Se queda como CSS propio porque el formulario es PHP del tema. El dia que
   pase a un plugin de formularios, esta seccion se borra entera.

   EL ORO NO SE USA PARA TEXTO. Medido: #A9986C sobre blanco da 2,84 de
   contraste y el minimo accesible es 4,5. Va como borde y como fondo.
   ========================================================================= */
.form{max-width:640px;display:flex;flex-direction:column;gap:26px}

.triaje{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.triaje input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.triaje label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:60px;padding:12px 14px;border:1px solid #E2E2E3;border-radius:6px;
  background:#fff;font-size:15px;font-weight:500;line-height:1.25;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .14s ease;
}
.triaje label:hover{border-color:#BEAF87;background:#FBF8F1}
.triaje label:active{transform:scale(.985)}
.triaje input:checked + label{border-color:#252526;background:#252526;color:#fff}
.triaje input:focus-visible + label{outline:2px solid #BEAF87;outline-offset:3px}

.field{display:flex;flex-direction:column;gap:7px}
.field > label{font-size:15px;font-weight:500}
.field .hint{font-family:'Poppins',Arial,sans-serif;font-size:13px;color:#7A7A7E}

.input,.textarea,.select{
  font-family:inherit;font-size:16px;padding:13px 15px;
  border:1px solid #7A7A7E;border-radius:6px;background:#fff;color:#252526;width:100%;
}
.textarea{min-height:110px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{
  outline:2px solid #BEAF87;outline-offset:2px;border-color:#8C7D5B;
}

.consents{display:flex;flex-direction:column;gap:12px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;color:#4A4A4D}
.consent input{margin-top:3px;accent-color:#BEAF87;flex:none;width:17px;height:17px}

/* Senuelo antispam: fuera de pantalla, NUNCA display:none — un lector de
   pantalla no lo anuncia y un bot si lo rellena. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form__msg{font-size:15px;padding:14px 16px;border-radius:6px;display:none}
.form__msg.is-ok{display:block;background:#F4EFE2;color:#252526}
.form__msg.is-err{display:block;background:#fbeaea;color:#7a1f1f}

@media (max-width:600px){
  .triaje{grid-template-columns:1fr}
  .triaje label{min-height:52px}
}


/* =========================================================================
   5 · MOVIMIENTO REDUCIDO
   Quien lo pide en su sistema operativo no ve animaciones. No es un detalle
   estetico: para algunas personas el movimiento provoca mareo.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* =========================================================================
   6 · PORTADA — DISEÑO DE LA MAQUETA VALIDADA (14-sep-2026)
   -------------------------------------------------------------------------
   La maqueta se aprobo como HTML y CSS. Este bloque es ese CSS, con el
   prefijo do- para que no choque con GeneratePress ni con el nucleo. Cada
   seccion es un patron de bloques nativos (inc/patrones.php) y cada bloque
   lleva su clase: Daniel edita el texto en el editor y el diseno no se mueve.

   Reticulas: bloques Columnas del nucleo (apilan solos por debajo de 782 px).
   Los Grupos llevan dentro el .wp-block-group__inner-container que anade
   GeneratePress; por eso aqui no hay selectores hijo directo sobre Grupos.
   ========================================================================= */
:root{
  --do-paper:#FFFFFF; --do-stone:#F4F2ED; --do-stone-2:#EBE8E0;
  --do-ink:#14161A; --do-ink-2:#4B4E55; --do-ink-3:#6B6E76; --do-line:#E3E0D8;
  --do-gold:#C9AC77; --do-gold-deep:#7D6337;
  --do-night:#0F1216; --do-night-2:#171A1F; --do-night-ink:#F4F2ED; --do-night-ink-2:#B9BCC3; --do-night-line:#2A2E36;
  --do-w:1240px; --do-gut:clamp(20px,4vw,48px);
}

/* --- la portada no lleva relleno del contenedor: las secciones van a sangre --- */
.home .site-content,.home .content-area{padding:0}
.home .entry-content{margin-top:0}
.home .entry-content > .alignfull{margin-top:0;margin-bottom:0}

/* --- cabecera: marca en dos lineas, menu a la derecha, fija al hacer scroll --- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--do-line)}
.inside-header{max-width:var(--do-w);padding-inline:var(--do-gut)}
.main-title{line-height:1.15}
.site-description{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--do-ink-3);margin:3px 0 0}
.main-navigation .main-nav ul li a{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.main-navigation .main-nav ul li a:hover{color:var(--do-ink)}
/* elemento de menu con la clase do-cta = boton negro */
.main-navigation .main-nav ul li.do-cta{margin-left:14px}
.main-navigation .main-nav ul li.do-cta a{background:var(--do-ink);color:#fff;border-radius:999px;padding:0 20px;line-height:44px;margin-top:16px;margin-bottom:16px;font-size:12px}
.main-navigation .main-nav ul li.do-cta a:hover{background:var(--do-gold-deep);color:#fff}
@media (max-width:1180px){.main-navigation .main-nav ul li.do-cta{margin-left:0}.main-navigation .main-nav ul li.do-cta a{background:none;color:inherit;border-radius:0;padding:0 var(--do-gut);line-height:52px;margin:0;font-size:13px}}

/* --- piezas comunes --- */
.do-wrap{max-width:var(--do-w);margin-inline:auto;padding-inline:var(--do-gut)}
.do-sec{padding-block:clamp(72px,9vw,128px)}
.do-stone{background:var(--do-stone)}
.entry-content .do-eyebrow{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--do-gold-deep);margin:0 0 14px}
.entry-content .do-eyebrow.do-on-dark{color:var(--do-gold)}
.entry-content .do-h1,.entry-content .do-h2,.entry-content .do-step-h,.entry-content .do-band-h2{font-weight:300;letter-spacing:-0.01em;text-wrap:balance;margin:0}
.entry-content .do-h1{font-size:clamp(36px,4.4vw,58px);line-height:1.06;max-width:14ch;text-transform:none;letter-spacing:-0.01em}
.entry-content .do-h2{font-size:clamp(30px,3.4vw,46px);line-height:1.12}
.entry-content .do-head-p{color:var(--do-ink-2);max-width:48ch;margin:0}
.do-cols{gap:clamp(24px,5vw,80px)}
.do-head{margin-bottom:clamp(40px,5vw,72px);align-items:flex-end}
.do-head-solo{margin-bottom:clamp(40px,5vw,72px)}

/* botones: pildora, mayusculas, negro o linea */
.do-cta-row{gap:14px;margin-top:36px}
.do-btn .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.do-btn .wp-block-button__link:hover{transform:translateY(-1px)}
.do-btn-ink .wp-block-button__link{background:var(--do-ink);color:#fff}
.do-btn-ink .wp-block-button__link:hover{background:var(--do-gold-deep);color:#fff}
.do-btn-line .wp-block-button__link{background:transparent;color:var(--do-ink);border-color:var(--do-ink)}
.do-btn-line .wp-block-button__link:hover{color:var(--do-gold-deep);border-color:var(--do-gold-deep);background:transparent}
@media (max-width:520px){.do-cta-row .do-btn,.do-cta-row .do-btn .wp-block-button__link{width:100%}}

/* --- 1 primera pantalla --- */
.do-hero{padding-block:0}
.do-hero-cols{align-items:stretch}
.do-hero-copy{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,80px)}
.entry-content .do-lead{font-size:clamp(17px,1.35vw,20px);color:var(--do-ink-2);max-width:44ch;margin:22px 0 0}
.entry-content .do-hint{font-size:14px;color:var(--do-ink-3);margin:16px 0 0}
.entry-content .do-zones-line{margin:clamp(36px,5vw,64px) 0 0;padding-top:22px;border-top:1px solid var(--do-line);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--do-ink-3);word-spacing:.35em}
.entry-content .do-zones-line strong{font-weight:500;color:var(--do-ink-2);margin-right:.5em}
.do-hero-side{display:flex}
.entry-content .do-hero-photo{flex:1;position:relative;margin:0;min-height:520px;background:var(--do-stone);overflow:hidden}
.entry-content .do-hero-photo::before{content:"";position:absolute;inset:22px;border:1px solid var(--do-gold);opacity:.7;pointer-events:none;z-index:1}
.entry-content .do-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;max-width:none}
.entry-content .do-hero-photo figcaption{position:absolute;left:40px;bottom:36px;z-index:2;margin:0;background:#14161A;color:#F4F2ED;padding:14px 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;text-align:left}
.entry-content .do-hero-photo figcaption strong{display:block;color:#C9AC77;font-size:11px;letter-spacing:.2em;font-weight:500}
@media (max-width:781px){
  .do-hero-cols{gap:0}
  .do-hero .do-wrap{padding-inline:0}
  .do-hero-copy{padding-inline:var(--do-gut)}
  .entry-content .do-hero-photo{min-height:0;aspect-ratio:4/5;max-height:640px;width:100%}
  .entry-content .do-hero-photo figcaption{left:var(--do-gut);bottom:24px}
  .entry-content .do-hero-photo::before{inset:14px}
}

/* --- 2 banda de mar --- */
.do-band{position:relative;min-height:520px;display:flex;align-items:flex-end;color:#F4F2ED;isolation:isolate;overflow:hidden;padding-block:clamp(48px,7vw,96px)}
.do-band > .wp-block-group__inner-container{width:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit}
.entry-content .do-band-img{position:absolute;inset:0;margin:0;z-index:-2}
.entry-content .do-band-img img{width:100%;height:100%;object-fit:cover;object-position:center 60%;max-width:none}
.do-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,18,22,.05) 0%,rgba(15,18,22,.55) 60%,rgba(15,18,22,.82) 100%);z-index:-1}
.do-band .do-wrap{width:100%;position:relative;z-index:1}
.do-band-cols{align-items:flex-end;gap:40px}
.entry-content .do-band-h2{font-size:clamp(26px,3.1vw,42px);line-height:1.15;max-width:22ch;color:#F4F2ED}
.entry-content .do-band-p{color:#D8DAD2;max-width:40ch;font-size:16px;margin:0}

/* --- 3 metodologia --- */
.entry-content .do-method-photo{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--do-stone-2)}
.entry-content .do-method-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);max-width:none}
.entry-content .do-method-photo figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#F4F2ED;text-align:left;background:linear-gradient(180deg,transparent,rgba(15,18,22,.75))}
.do-steps{counter-reset:paso}
.do-step{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--do-line)}
.do-step:last-of-type{border-bottom:1px solid var(--do-line)}
.do-step::before{counter-increment:paso;content:"0" counter(paso);font-size:13px;font-weight:500;letter-spacing:.2em;color:var(--do-gold-deep);padding-top:8px}
.entry-content .do-step-h{font-size:clamp(20px,1.8vw,24px);font-weight:400;line-height:1.3}
.entry-content .do-step-p{color:var(--do-ink-2);margin:8px 0 0;max-width:52ch}
.do-buy{margin-top:32px;padding:26px 28px;background:var(--do-stone);border-left:2px solid var(--do-gold);color:var(--do-ink-2);font-size:15px}
.do-buy p{margin:0}
.do-buy strong{font-weight:500;color:var(--do-ink);display:block;margin-bottom:6px}
@media (max-width:781px){.entry-content .do-method-photo{aspect-ratio:16/10}}

/* --- 4 zonas --- */
.do-zones{align-items:center}
.entry-content .do-zones-photo{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--do-stone-2)}
.entry-content .do-zones-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.8);max-width:none}
.entry-content .do-zones-p{color:var(--do-ink-2);margin:24px 0 0}
.entry-content .do-note{font-size:14px;color:var(--do-ink-3);max-width:46ch;margin:16px 0 0}

/* --- 5 quien soy --- */
.do-about{align-items:flex-start}
.entry-content .do-about-photo{position:relative;margin:0 18px 18px 0;aspect-ratio:4/5;overflow:visible;background:var(--do-stone);isolation:isolate}
.entry-content .do-about-photo img{width:100%;height:100%;object-fit:cover;object-position:right top;filter:grayscale(1) contrast(1.05);max-width:none;position:relative;z-index:1}
.entry-content .do-about-photo::after{content:"";position:absolute;left:18px;top:18px;right:-18px;bottom:-18px;border:1px solid var(--do-gold);z-index:0}
.do-about-text{max-width:62ch}
.do-about-text p{color:var(--do-ink-2);margin:18px 0 0}
.entry-content .do-pull{font-size:clamp(22px,2.2vw,30px);font-weight:300;line-height:1.3;color:var(--do-ink);margin:36px 0 28px;padding-left:24px;border-left:1px solid var(--do-gold)}
.do-about-text .do-cta-row{margin-top:8px}
@media (max-width:781px){.entry-content .do-about-photo{max-width:360px}}

/* --- 6 opiniones (patron opcional) --- */
.do-quote{padding:32px 30px 28px;background:var(--do-paper);border:1px solid var(--do-line);min-height:240px;position:relative}
.do-quote::before{content:"\201C";font-family:Georgia,serif;font-size:38px;line-height:1;color:var(--do-gold);display:block;margin-bottom:12px}
.entry-content .do-quote-p{color:var(--do-ink-2);margin:0 0 18px}
.entry-content .do-quote-by{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--do-ink-3);margin:0}
.entry-content .do-quote-by strong{font-weight:500;color:var(--do-ink);display:block;letter-spacing:.1em}

/* --- 7 preguntas frecuentes --- */
.do-faq{max-width:820px}
.entry-content .do-faq-item{border-top:1px solid var(--do-line);margin:0}
.entry-content .do-faq-item:last-of-type{border-bottom:1px solid var(--do-line)}
.entry-content .do-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:clamp(17px,1.5vw,20px);font-weight:400}
.entry-content .do-faq-item summary::-webkit-details-marker{display:none}
.entry-content .do-faq-item summary::after{content:"+";font-weight:300;font-size:26px;color:var(--do-gold-deep);transition:transform .2s}
.entry-content .do-faq-item[open] summary::after{transform:rotate(45deg)}
.entry-content .do-faq-item p{color:var(--do-ink-2);padding:0 0 24px;margin:0;max-width:66ch}

/* --- 8 cuentame tu caso --- */
.do-final{background:var(--do-night);color:var(--do-night-ink);padding-block:clamp(72px,9vw,128px)}
.do-final-cols{align-items:center;gap:clamp(32px,6vw,96px)}
.entry-content .do-final-h2{color:var(--do-night-ink);font-size:clamp(30px,3.6vw,50px);line-height:1.1}
.entry-content .do-final-p{color:var(--do-night-ink-2);margin:20px 0 0;max-width:44ch}

/* formulario del shortcode [c21_formulario] */
.do-form{display:grid;gap:14px;background:var(--do-night-2);padding:clamp(24px,3vw,40px);border:1px solid var(--do-night-line);margin:0}
.do-form label{display:grid;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--do-night-ink-2)}
.do-form input,.do-form select{font:inherit;font-size:16px;color:var(--do-night-ink);background:transparent;border:0;border-bottom:1px solid #3A3F49;padding:10px 0;border-radius:0;text-transform:none;letter-spacing:0;width:100%}
.do-form select{appearance:none;-webkit-appearance:none}
.do-form select option{color:#14161A}
.do-form input::placeholder{color:#6F737B}
.do-form input:focus,.do-form select:focus{outline:2px solid var(--do-gold);outline-offset:3px}
.do-form .do-consent{font-size:12px;color:#8E9199;letter-spacing:0;text-transform:none;display:flex;gap:10px;align-items:flex-start}
.do-form .do-consent a{color:#B9BCC3;text-decoration:underline}
.do-form .do-consent input{width:16px;height:16px;margin-top:3px;accent-color:#C9AC77}
.do-form button{margin-top:10px;width:100%;min-height:52px;padding:0 26px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:0;background:var(--do-night-ink);color:var(--do-night);cursor:pointer;transition:background .18s ease}
.do-form button:hover{background:var(--do-gold);color:var(--do-night)}
.do-form button:disabled{opacity:.6;cursor:wait}
.do-form .do-msg{font-size:14px;margin:0;display:none}
.do-form .do-msg.is-ok{display:block;color:#F4F2ED}
.do-form .do-msg.is-err{display:block;color:#F0B8B8}

/* --- pie --- */
.site-info{font-size:12px;letter-spacing:.04em}
.c21-legal a{margin-left:18px;text-decoration:none}

/* --- correcciones tras la primera subida (16-sep) --- */
/* GP one-container mete 40 px (30 en movil) de relleno en .inside-article; en la
   portada las secciones van a sangre y ese relleno estrechaba las columnas. */
.home .inside-article{padding:0}
/* la cabecera fija no se esconde bajo la barra de administracion */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
/* movil y tableta (hasta 1180, el mismo corte que generate_mobile_menu_media_query): marca y boton
   de menu en la misma fila; el menu se despliega debajo a todo el ancho */
@media (max-width:1180px){
  .site-header .inside-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;padding-block:12px}
  .site-header .site-branding{flex:1 1 auto;padding:0;margin:0}
  .site-header .site-description{font-size:10px}
  .site-header #site-navigation{flex:0 0 auto;float:none;margin:0;position:static}
  .main-navigation .menu-toggle{width:auto;padding:0 10px;line-height:44px;background:transparent}
  /* .inside-navigation es position:relative en GP y encogia el desplegable al ancho del boton */
  .site-header .inside-navigation{position:static}
  .main-navigation .main-nav{position:absolute;left:0;right:0;top:100%;width:100%;background:var(--do-paper);border-bottom:1px solid var(--do-line);z-index:31}
  .main-navigation .main-nav ul{width:100%;float:none;margin:0;padding:0}
  .main-navigation .main-nav ul li{float:none;display:block;width:100%;text-align:left}
  .main-navigation .main-nav ul li a{display:block;line-height:52px;padding:0 var(--do-gut)}
  .entry-content .do-hero-photo figcaption{font-size:11px;max-width:calc(100% - 80px)}
}

/* GeneratePress mete en TODO .wp-block-group__inner-container un ancho maximo de
   1240 y 40 px de relleno (30 en movil). Con secciones anidadas se sumaban dos
   veces y estrechaban las columnas. En los bloques de la portada el ancho lo da
   .do-wrap y nada mas. */
.entry-content [class*="do-"] > .wp-block-group__inner-container{padding:0;max-width:none;margin:0}


/* =========================================================================
   7 · CORRECCIONES DE LA AUDITORIA DE DISENO (17-sep-2026)
   -------------------------------------------------------------------------
   Auditoria de ocho dimensiones con verificacion adversarial: 100 hallazgos,
   38 confirmados. Aqui van los que se arreglan con CSS. Van al final del
   fichero a proposito: varios necesitan ganar por orden de origen a las
   reglas que GeneratePress emite en linea desde el Personalizador.
   ========================================================================= */

/* 7.1 · LA FOTO DEL BANNER, AJUSTADA AL PANEL
   Lo que fallaba: el fichero era 720x900 (4:5) dentro de un panel de 532x800
   (2:3). `cover` recortaba 108 px de ancho, la cara se ampliaba a tamano casi
   natural y en tabletas el retrato salia apaisado con la cabeza a ras.
   Lo que se hace: el fichero nuevo (1064x1596) ya trae el fondo en --do-stone
   y aire sobre la cabeza, asi que la imagen se encaja COMPLETA con `contain`.
   Como el fondo de la foto y el del panel son el mismo color, el sobrante no
   se ve: el retrato nunca se recorta, sea cual sea la proporcion del panel. */
.entry-content .do-hero-photo img{object-fit:contain;object-position:center bottom}
.entry-content .do-about-photo img{object-fit:contain;object-position:center bottom;filter:grayscale(1) contrast(1.03)}

/* 7.2 · BOTONES: el secundario se pintaba negro
   GeneratePress emite `a.wp-block-button__link:not(.has-background)` (0,2,1) y
   ganaba a `.do-btn-line .wp-block-button__link` (0,2,0). Resultado: dos
   botones negros identicos en la primera pantalla y el hover dorado muerto. */
.entry-content .do-btn-ink a.wp-block-button__link{background-color:var(--do-ink);color:#fff}
.entry-content .do-btn-ink a.wp-block-button__link:hover,
.entry-content .do-btn-ink a.wp-block-button__link:focus{background-color:var(--do-gold-deep);color:#fff}
.entry-content .do-btn-line a.wp-block-button__link{background-color:transparent;color:var(--do-ink);border-color:var(--do-ink)}
.entry-content .do-btn-line a.wp-block-button__link:hover,
.entry-content .do-btn-line a.wp-block-button__link:focus{background-color:transparent;color:var(--do-gold-deep);border-color:var(--do-gold-deep)}
/* y que los dos quepan en una fila: 324+14+207 = 545 px no entraban en 532 */
.entry-content .do-btn .wp-block-button__link{padding:0 20px;letter-spacing:.05em}

/* 7.3 · FOCO VISIBLE en todo lo que se puede usar con teclado (solo lo tenian 2 de 16) */
.entry-content a:focus-visible,
.entry-content summary:focus-visible,
.do-form input:focus-visible,
.do-form select:focus-visible,
.do-form button:focus-visible,
.main-navigation a:focus-visible,
.menu-toggle:focus-visible{outline:2px solid var(--do-gold-deep);outline-offset:3px}
.do-form input:focus-visible,.do-form select:focus-visible,.do-form button:focus-visible{outline-color:var(--do-gold)}

/* 7.4 · CONTRASTE que fallaba AA
   Las tres frases de criterio iban en gris 4,12:1 y 3,68:1. El menu se ponia
   en oro claro (2,18:1) al pasar el raton, contra la regla escrita en la
   seccion 4 de este mismo fichero: el oro no se usa para texto. */
.entry-content .do-hint,
.entry-content .do-note{color:var(--do-ink-2)}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]) > a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li > a:focus-visible{color:var(--do-ink)}
/* formulario: la linea que dibuja el campo estaba a 1,65:1 (el minimo es 3:1) */
.do-form input,.do-form select{border-bottom-color:#6B7280}
.do-form input::placeholder{color:#868B94}
.do-form select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23B9BCC3' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:12px 8px;padding-right:22px}
/* el pie y la ultima seccion eran la misma mancha negra sin junta */
.site-info{border-top:1px solid var(--do-night-line)}

/* 7.5 · MEDIDA DE LINEA de las respuestas: corrian a 81-85 caracteres */
.entry-content .do-faq-item p{max-width:52ch;text-wrap:pretty}

/* 7.6 · LA BANDA DEL MAR pedia 520 px y pintaba 712
   `min-height:inherit` heredaba la altura y la sumaba SOBRE el relleno. */
.do-band > .wp-block-group__inner-container{min-height:0}

/* 7.7 · ANCLAS: la cabecera fija tapaba el titulo de la seccion de destino */
html{scroll-padding-top:92px}
.do-sec,.do-final,.do-band{scroll-margin-top:92px}

/* 7.8 · MOVIL
   La entradilla se leia a 17 px, un pixel POR DEBAJO del cuerpo (18 px).
   Y por debajo de 600 px la barra de administracion deja de ser fija, asi que
   el desfase de 46 px dejaba la cabecera flotando. */
@media (max-width:768px){
  .entry-content .do-lead{font-size:19px;line-height:1.5}
  .entry-content .do-band-p{font-size:18px}
}
@media (max-width:600px){.admin-bar .site-header{top:0}}
/* el retrato ya no se recorta nunca (7.1); la proporcion solo decide cuanto
   panel de piedra lo enmarca */
@media (max-width:781px){
  .entry-content .do-hero-photo{aspect-ratio:4/5;max-height:min(72vh,620px)}
}


/* =========================================================================
   8 · TELEFONO Y WHATSAPP (19-sep-2026)
   Solo existen en el HTML cuando c21_datos()['publicar_telefono'] es true.
   A la derecha (decision de Daniel, 19-sep) y con 44 px de objetivo tactil;
   se retira mientras un formulario o el pie estan a la vista (seccion 11.3). Verde oficial de WhatsApp, texto en negro
   para que el contraste no dependa del verde (4,7:1 sobre #25D366).
   ========================================================================= */
.c21-wa{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border-radius:999px;background:#25D366;color:#0B1F14;font-size:14px;font-weight:500;letter-spacing:.04em;text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);transition:transform .18s ease,background .18s ease}
.c21-wa:hover,.c21-wa:focus-visible{background:#1EBE5A;color:#0B1F14;transform:translateY(-1px)}
.c21-wa:focus-visible{outline:2px solid var(--do-gold-deep);outline-offset:3px}
.c21-wa svg{flex:none}
@media (max-width:600px){.c21-wa{padding:0 14px}.c21-wa span{display:none}}
.c21-tel{display:inline-block;margin-top:14px;font-size:15px}
.c21-tel a{text-decoration:underline;text-underline-offset:3px}
.c21-tel-sep{margin:0 6px;color:var(--do-ink-3)}
.entry-content .do-hint .c21-tel{margin:0 0 0 .5em}
/* el select de la pagina de contacto usa el mismo sistema que los inputs */
.select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23252526' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:40px}

/* =========================================================================
   9 · PAGINA DE VALORACION
   Reutiliza las piezas de la portada (do-*). Lo unico nuevo: la lista de lo
   que incluye el estudio y la nota del simulador, que es un enlace secundario
   a proposito: la valoracion de Daniel es el camino principal.
   ========================================================================= */
.entry-content .do-incluye{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;max-width:52ch}
.entry-content .do-incluye li{position:relative;padding-left:28px;color:var(--do-ink-2)}
.entry-content .do-incluye li::before{content:"";position:absolute;left:0;top:.65em;width:14px;height:1px;background:var(--do-gold-deep)}
.entry-content .do-simulador{margin:28px 0 0;padding:20px 24px;background:var(--do-stone);border-left:2px solid var(--do-gold);font-size:15px;color:var(--do-ink-2);max-width:52ch}
.entry-content .do-simulador a{color:var(--do-ink);text-decoration:underline;text-underline-offset:3px}
.page-template-default.page-id-valoracion .site-content{padding:0}
.do-plana .site-content,.do-plana .content-area{padding:0}
.do-plana .entry-content{margin-top:0}
.do-plana .inside-article{padding:0}
.do-plana .entry-content > .alignfull{margin-top:0;margin-bottom:0}

/* --- direccion en contacto (NAP visible, cohesion con la ficha de Google) --- */
.c21-nap{font-style:normal;margin-top:14px;font-size:15px;color:var(--do-ink-2)}
.c21-nap strong{font-weight:500;color:var(--do-ink)}
.c21-nap a{text-decoration:underline;text-underline-offset:3px}


/* =========================================================================
   10 · GUIA DEL PROPIETARIO (entradas del blog) — 19-sep-2026
   Medida de linea de lectura, jerarquia de titulos y la llamada a la accion
   dentro del articulo. La ficha de cada entrada en la pagina de la guia usa el
   bloque nativo Ultimas entradas.
   ========================================================================= */
.single-post .site-content{padding-top:clamp(40px,6vw,72px)}
.single-post .inside-article{max-width:760px;margin-inline:auto}
.single-post .entry-header{margin-bottom:28px}
.single-post .entry-title{font-size:clamp(30px,3.6vw,46px);font-weight:300;line-height:1.12;letter-spacing:-0.01em;text-transform:none;text-wrap:balance}
.single-post .entry-meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--do-ink-3)}
.single-post .entry-content{font-size:18px;line-height:1.65;color:var(--do-ink-2)}
.single-post .entry-content h2{font-size:clamp(24px,2.4vw,32px);font-weight:400;line-height:1.2;color:var(--do-ink);margin:48px 0 16px;text-wrap:balance}
.single-post .entry-content h3{font-size:clamp(19px,1.7vw,22px);font-weight:500;line-height:1.3;color:var(--do-ink);margin:32px 0 10px}
.single-post .entry-content p{margin:0 0 18px}
.single-post .entry-content ul{padding-left:22px;margin:0 0 22px}
.single-post .entry-content li{margin-bottom:8px}
.single-post .entry-content a{color:var(--do-ink);text-decoration:underline;text-underline-offset:3px}
.entry-content .do-cta-articulo{margin:40px 0;padding:28px 30px;background:var(--do-stone);border-left:2px solid var(--do-gold)}
.entry-content .do-cta-articulo p:last-child{margin:0;color:var(--do-ink)}
.entry-content .do-faq-articulo{margin-top:48px;max-width:none}
.entry-content .do-faq-articulo h2{margin-bottom:8px}
.single-post .post-navigation,.single-post .comments-area{display:none}
/* pagina de la guia: lista de entradas con extracto */
.entry-content .wp-block-latest-posts.do-guia-lista{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:0}
.entry-content .do-guia-lista li{border-top:1px solid var(--do-line);padding:26px 0;margin:0}
.entry-content .do-guia-lista li:last-child{border-bottom:1px solid var(--do-line)}
.entry-content .do-guia-lista a.wp-block-latest-posts__post-title{font-size:clamp(20px,1.8vw,24px);font-weight:400;line-height:1.3;color:var(--do-ink);text-decoration:none}
.entry-content .do-guia-lista a.wp-block-latest-posts__post-title:hover{color:var(--do-gold-deep)}
.entry-content .do-guia-lista .wp-block-latest-posts__post-excerpt{color:var(--do-ink-2);margin:8px 0 0;max-width:62ch}
.entry-content .do-guia-lista .wp-block-latest-posts__post-excerpt a,.entry-content .do-guia-lista .wp-block-latest-posts__read-more{display:none}
.do-guia .inside-article{max-width:820px;margin-inline:auto}

/* la firma de autor sale de la ficha de usuario; la fecha basta (GP gratis no lo configura) */
.single-post .entry-meta .byline,.single-post .entry-meta .comments-link{display:none}
.do-guia .entry-header{display:none}


/* =========================================================================
   11 · AUDITORIA VISUAL DEL 19-sep-2026 — los cinco bloqueantes
   -------------------------------------------------------------------------
   Medido en el navegador a 1440 y 375 px, en las cinco plantillas:
     1. El banner de cookies cubria el 55 % del movil con un boton violeta de
        fabrica (#3B29FF) y era el elemento mas grande de la carga.
     2. En /contacto el boton de la cabecera era negro sobre negro.
     3. El WhatsApp flotante iba a la izquierda y tapaba contenido.
     4. Sin favicon (lo pone inc/marca.php).
     5. /contacto y la guia fuera del sistema (secciones 12 y 13).
   ========================================================================= */

/* 11.1 · COOKIES (Complianz). El banner declara sus colores como variables
   CSS en :root; se redefinen sobre su contenedor, que gana por herencia.
   Paleta de la web, botones pildora, y el boton fijo "Gestionar
   consentimiento" desaparece: su funcion pasa al enlace del pie. */
#cmplz-cookiebanner-container,#cmplz-manage-consent{
  --cmplz_banner_width:400px;
  --cmplz_banner_background_color:#FFFFFF;
  --cmplz_banner_border_color:#E3E0D8;
  --cmplz_banner_border_width:1px 1px 1px 1px;
  --cmplz_banner_border_radius:4px 4px 4px 4px;
  --cmplz_banner_margin:20px;
  --cmplz_text_color:#4B4E55;
  --cmplz_hyperlink_color:#14161A;
  --cmplz_text_font_size:14px;
  --cmplz_link_font_size:13px;
  --cmplz_title_font_size:12px;
  --cmplz_button_font_size:13px;
  --cmplz_button_accept_background_color:#14161A;
  --cmplz_button_accept_border_color:#14161A;
  --cmplz_button_accept_text_color:#FFFFFF;
  --cmplz_button_deny_background_color:transparent;
  --cmplz_button_deny_border_color:#14161A;
  --cmplz_button_deny_text_color:#14161A;
  --cmplz_button_settings_background_color:transparent;
  --cmplz_button_settings_border_color:transparent;
  --cmplz_button_settings_text_color:#4B4E55;
  --cmplz_button_border_radius:999px 999px 999px 999px;
  --cmplz_slider_active_color:#7D6337;
  --cmplz_category_header_always_active_color:#7D6337;
}
.cmplz-cookiebanner{font-family:'Poppins',Arial,sans-serif;box-shadow:0 24px 48px -24px rgba(15,18,22,.35)}
.cmplz-cookiebanner .cmplz-title{letter-spacing:.2em;text-transform:uppercase;color:var(--do-gold-deep);font-weight:500}
.cmplz-cookiebanner .cmplz-divider-header{display:none}
.cmplz-cookiebanner .cmplz-message{line-height:1.55}
.cmplz-cookiebanner .cmplz-btn{font-weight:500;letter-spacing:.06em;text-transform:uppercase;min-height:44px;padding:0 18px;transition:background .18s ease,color .18s ease,border-color .18s ease}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover{background-color:var(--do-gold-deep)!important;border-color:var(--do-gold-deep)!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences{text-decoration:underline;text-underline-offset:3px;padding:0}
.cmplz-cookiebanner .cmplz-links a{text-decoration:underline;text-underline-offset:3px}
#cmplz-manage-consent .cmplz-manage-consent{display:none!important}
/* nunca bloquear la pagina mientras el banner esta a la vista: el telefono y
   los botones tienen que funcionar aunque no se conteste a las cookies */
body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *){pointer-events:auto!important;user-select:auto!important}
@media (max-width:600px){
  .cmplz-cookiebanner{margin:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;border-radius:12px 12px 0 0!important;border-width:1px 0 0 0!important}
  .cmplz-cookiebanner .cmplz-buttons{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .cmplz-cookiebanner .cmplz-btn.cmplz-accept,.cmplz-cookiebanner .cmplz-btn.cmplz-deny{width:100%!important;max-width:none!important;flex:none!important;margin:0!important;height:auto!important}
  .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{grid-column:1 / -1;width:100%!important;max-width:none!important;min-height:32px;margin:0!important}
  .cmplz-cookiebanner .cmplz-message{font-size:14px!important}
}

/* 11.2 · CABECERA: el boton negro seguia siendo boton en su propia pagina.
   La regla de contraste (7.4) pintaba en tinta todo enlace current-menu-,
   incluido el del boton, y ganaba por especificidad. */
.main-navigation .main-nav ul li.do-cta[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.do-cta > a:focus-visible{color:#fff}
.main-navigation .main-nav ul li.do-cta[class*="current-menu-"] > a:hover{background:var(--do-gold-deep);color:#fff}
@media (max-width:1180px){.main-navigation .main-nav ul li.do-cta[class*="current-menu-"] > a{color:inherit}}

/* 11.3 · WHATSAPP A LA DERECHA (decision de Daniel, 19-sep) y retirado
   mientras un formulario o el pie estan a la vista (inc/contacto.php). */
.c21-wa{left:auto;right:20px}
.c21-wa.is-off{transform:translateY(140%);opacity:0;pointer-events:none}
.c21-wa{transition:transform .28s ease,opacity .2s ease,background .18s ease}


/* =========================================================================
   12 · PAGINA DE CONTACTO, DENTRO DEL SISTEMA
   Dos columnas: copy y pasos a la izquierda, formulario a la derecha en una
   tarjeta de piedra con los campos subrayados del formulario de la portada.
   Estas reglas van despues de la seccion 4 y la sustituyen por cascada.
   ========================================================================= */
.do-contacto .site-content,.do-contacto .content-area{padding:0}
.do-contacto .inside-article{padding:0}
.do-contacto .entry-content{margin-top:0}
.c21-contacto{padding-block:clamp(56px,8vw,112px)}
.c21-contacto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,7vw,112px);align-items:start}
.c21-contacto-copy .do-h1{margin-top:0}
.c21-contacto .c21-contacto-tel{margin-top:20px}
.c21-contacto .c21-contacto-tel .c21-tel{margin:0 0 0 .4em;font-size:inherit}
.c21-contacto-prose{margin-top:24px;color:var(--do-ink-2);max-width:48ch}
.c21-contacto-steps{margin-top:clamp(36px,5vw,56px)}
.c21-contacto-steps > .do-eyebrow{margin-bottom:6px}
.c21-contacto .do-step{padding:22px 0;grid-template-columns:56px 1fr}
.c21-contacto .do-step-h{font-size:19px}
.c21-contacto .do-step-p{font-size:15px}
.c21-contacto .c21-nap{margin-top:32px;font-size:14px;line-height:1.7}

/* la tarjeta del formulario */
.c21-contacto-form{position:sticky;top:112px}
.c21-contacto .form{max-width:none;gap:22px;padding:clamp(24px,3.2vw,40px);background:var(--do-stone);border:1px solid var(--do-line)}
.c21-contacto .field{gap:6px}
.c21-contacto .field--triaje{border:0;padding:0;margin:0;min-width:0}
.c21-contacto .field-label,.c21-contacto .field > label{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--do-ink-2);padding:0 0 4px}
.c21-contacto .triaje{gap:8px;grid-template-columns:1fr}
.c21-contacto .triaje label{min-height:46px;padding:10px 16px;border:1px solid var(--do-ink-3);border-radius:999px;background:transparent;font-size:14px;font-weight:400;justify-content:flex-start;text-align:left;color:var(--do-ink)}
.c21-contacto .triaje label::before{content:"";width:12px;height:12px;border-radius:50%;border:1px solid var(--do-ink-3);margin-right:12px;flex:none;transition:background .18s ease,border-color .18s ease}
.c21-contacto .triaje label:hover{border-color:var(--do-ink);background:transparent}
.c21-contacto .triaje input:checked + label{border-color:var(--do-ink);background:var(--do-ink);color:#fff}
.c21-contacto .triaje input:checked + label::before{background:var(--do-gold);border-color:var(--do-gold)}
.c21-contacto .triaje input:focus-visible + label{outline:2px solid var(--do-gold-deep);outline-offset:3px}
.c21-contacto .input,.c21-contacto .textarea,.c21-contacto .select{font-size:16px;padding:10px 0;border:0;border-bottom:1px solid #6B7280;border-radius:0;background:transparent;color:var(--do-ink)}
.c21-contacto .input::placeholder,.c21-contacto .textarea::placeholder{color:#868B94}
.c21-contacto .textarea{min-height:64px}
.c21-contacto .select{background-repeat:no-repeat;background-size:12px 8px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2314161A' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-position:right 2px center;padding-right:24px}
.c21-contacto .input:focus,.c21-contacto .textarea:focus,.c21-contacto .select:focus{outline:2px solid var(--do-gold-deep);outline-offset:3px;border-bottom-color:var(--do-ink)}
.c21-contacto .field .hint{font-size:13px;color:var(--do-ink-3);margin-top:2px}
.c21-contacto .consents{gap:10px;margin-top:2px}
.c21-contacto .consent{font-size:13px;line-height:1.5;color:var(--do-ink-2)}
.c21-contacto .consent a{color:var(--do-ink);text-decoration:underline;text-underline-offset:3px}
.c21-contacto .consent input{accent-color:var(--do-gold-deep);width:16px;height:16px}
.c21-contacto .btn--primary{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--do-ink);color:#fff;font:inherit;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,transform .18s ease}
.c21-contacto .btn--primary:hover{background:var(--do-gold-deep);transform:translateY(-1px)}
.c21-contacto .btn--primary:focus-visible{outline:2px solid var(--do-gold-deep);outline-offset:3px}
.c21-contacto .btn--primary:disabled{opacity:.6;cursor:wait;transform:none}
.c21-contacto .form__nota{font-size:13px;color:var(--do-ink-3);text-align:center;margin:-8px 0 0}
.c21-contacto .form__msg{margin:0}
@media (max-width:900px){
  .c21-contacto-grid{grid-template-columns:1fr;gap:40px}
  .c21-contacto-form{position:static}
}
@media (min-width:601px){.c21-contacto .triaje{grid-template-columns:1fr}}


/* =========================================================================
   13 · GUIA: TARJETAS CON HUECO DE FOTO, Y CABECERA DE LOS ARTICULOS
   La lista la pinta inc/marca.php. Sin imagen destacada, la tarjeta lleva
   una pieza de piedra con el marco dorado del retrato, el numero y el tiempo
   de lectura; con imagen, la foto a 16:10. Los articulos reciben la imagen
   destacada (la pinta GeneratePress) encajada a 16:9 y un eyebrow encima
   del titulo.
   ========================================================================= */
.do-guia .inside-article{max-width:var(--do-w);padding-inline:var(--do-gut)}
.do-guia .entry-content > *:not(.do-guia-lista){max-width:820px}
.entry-content .do-guia-lista.do-guia-tarjetas{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(24px,3vw,40px);margin-top:clamp(40px,5vw,64px);border:0}
.entry-content .do-guia-tarjetas li{border:0;padding:0;margin:0}
.entry-content .do-guia-card{display:grid;gap:14px;text-decoration:none;color:inherit}
.entry-content .do-guia-img{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--do-stone)}
.entry-content .do-guia-img img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .5s ease}
.entry-content .do-guia-card:hover .do-guia-img img{transform:scale(1.03)}
.entry-content .do-guia-ph::before{content:"";position:absolute;inset:16px;border:1px solid var(--do-gold);opacity:.8;pointer-events:none}
.entry-content .do-guia-num{position:absolute;left:36px;top:32px;font-size:13px;font-weight:500;letter-spacing:.2em;color:var(--do-gold-deep)}
.entry-content .do-guia-min{position:absolute;left:36px;bottom:30px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--do-ink-3)}
.entry-content .do-guia-h{font-size:clamp(20px,1.7vw,24px);font-weight:400;line-height:1.3;margin:6px 0 0;color:var(--do-ink);text-wrap:balance;transition:color .18s ease}
.entry-content .do-guia-card:hover .do-guia-h{color:var(--do-gold-deep)}
.entry-content .do-guia-x{color:var(--do-ink-2);margin:0;font-size:16px;line-height:1.55}
.entry-content .do-guia-leer{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--do-ink);margin-top:4px}
.entry-content .do-guia-leer::after{content:"\2192";margin-left:8px;color:var(--do-gold-deep)}
@media (max-width:640px){.entry-content .do-guia-lista.do-guia-tarjetas{grid-template-columns:1fr}}

/* articulo */
.single-post .entry-header .do-eyebrow-articulo{margin-bottom:16px}
.single-post .entry-meta{margin-top:12px}
.single-post .featured-image{margin:0 0 36px}
.single-post .featured-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.single-post .entry-content li::marker{color:var(--do-gold-deep)}
.single-post .entry-content .do-faq-item summary{font-size:19px}
.single-post .footer-meta .cat-links{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--do-ink-3)}
.single-post .footer-meta .cat-links a{text-decoration:none;color:var(--do-ink)}


/* =========================================================================
   14 · PIE COMPLETO (inc/marca.php) y reseñas de Google [c21_resenas]
   Sobre la linea de copyright que ya existia. Fondo noche-2 para que no sea
   la misma mancha que la ultima seccion de la portada.
   ========================================================================= */
.c21-foot{background:var(--do-night-2);color:var(--do-night-ink-2);border-top:1px solid var(--do-night-line);padding-block:clamp(48px,6vw,80px)}
.c21-foot-in{max-width:var(--do-w);margin-inline:auto;padding-inline:var(--do-gut);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,5vw,80px)}
.c21-foot p,.c21-foot address{margin:0 0 8px;font-style:normal;font-size:15px;line-height:1.6}
.c21-foot a{color:var(--do-night-ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease}
.c21-foot a:hover{border-bottom-color:var(--do-gold);color:#fff}
.c21-foot a:focus-visible{outline:2px solid var(--do-gold);outline-offset:3px}
.c21-foot-nombre{font-size:15px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--do-night-ink)}
.c21-foot-cargo{color:var(--do-night-ink-2)}
.c21-foot-zonas{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--do-night-ink-2);margin-top:16px}
.c21-foot-eyebrow{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--do-gold);margin:0 0 14px}
.c21-foot ul{list-style:none;margin:0;padding:0}
.c21-foot li{margin:0 0 8px;font-size:15px}
.c21-foot-horario{font-size:14px;color:var(--do-night-ink-2)}
.site-footer .site-info{background:var(--do-night-2)}
@media (max-width:781px){.c21-foot-in{grid-template-columns:1fr;gap:36px}}

/* reseñas: solo existe con datos reales de la ficha */
.c21-resenas{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 16px;border:1px solid var(--do-line);border-radius:999px;text-decoration:none;color:var(--do-ink);font-size:14px}
.c21-resenas-nota{font-weight:500}
.c21-resenas-estrellas{color:var(--do-gold);letter-spacing:.1em;font-size:13px}
.c21-resenas-n{color:var(--do-ink-2)}
.c21-resenas--oscuro{border-color:var(--do-night-line);color:var(--do-night-ink)}
.c21-resenas--oscuro .c21-resenas-n{color:var(--do-night-ink-2)}


/* =========================================================================
   15 · PORTADA 2.4 (20-sep-2026): textos validados en el chat
   Hero sin pie de foto y con la foto entera en la primera pantalla; «Cómo
   trabajamos» con los tres pasos de Daniel y boton; seccion CENTURY 21 con
   cifras publicas y tarjeta de oficina (absorbe las zonas); WhatsApp en
   blanco como en la app oficial (el icono es logotipo: exento de contraste).
   ========================================================================= */
@media (min-width:782px){.entry-content .do-hero-photo{max-height:calc(100vh - 118px)}}
.entry-content .do-method-cta{margin-top:28px}
.do-cifras{margin-top:32px;gap:16px}
.entry-content .do-cifra{margin:0;font-size:14px;color:var(--do-ink-2);line-height:1.4}
.entry-content .do-cifra strong{display:block;font-size:clamp(28px,2.6vw,36px);font-weight:300;color:var(--do-ink);line-height:1.1;margin-bottom:4px}
.entry-content .do-oficina{margin-top:20px;padding:24px 26px;background:var(--do-paper);border:1px solid var(--do-line)}
.entry-content .do-oficina .do-eyebrow{margin-bottom:10px}
.entry-content .do-oficina-dir{margin:0;font-size:15px;color:var(--do-ink-2);line-height:1.6}
.entry-content .do-oficina-dir strong{color:var(--do-ink);font-weight:500}
.entry-content .do-oficina-dir a,.entry-content .do-oficina-link a{color:var(--do-ink);text-decoration:underline;text-underline-offset:3px}
.entry-content .do-oficina-zonas{margin:14px 0 0;padding-top:14px}
.entry-content .do-oficina-premio{margin:14px 0 0;font-size:14px;color:var(--do-ink-2)}
.entry-content .do-oficina-link{margin:10px 0 0;font-size:14px}
.c21-wa,.c21-wa:hover,.c21-wa:focus-visible{color:#fff}