/* Sistema visual portado de la demo (27-ago-2026), sin la seccion de precios
   ni la de seguridad infantil, que el cliente descarto el 4-sep-2026.
   Las variables --u-* las emite theme.json como --wp--custom--*; aqui se
   mapean para no reescribir 900 lineas de reglas ya validadas. */
:root{
  --u-ink:var(--wp--preset--color--ink);
  --u-ink-soft:var(--wp--preset--color--ink-soft);
  /* sand-50 es el fondo del sitio. Era crema #FBF8F3; desde el 18-sep-2026 es
     blanco, pedido de Romina tras la revision ("que siga siendo blanco como antes"). */
  --u-sand-50:var(--wp--preset--color--sand-50);
  --u-sand-100:var(--wp--preset--color--sand-100);
  --u-sand-200:var(--wp--preset--color--sand-200);
  --u-sand-300:var(--wp--preset--color--sand-300);
  /* Sistema de color cerrado el 9-sep-2026, al aprobarse el logotipo condensado.
     El burdeos #832F57 salio: era el fucsia que el PDF de propuesta ya proponia
     dejar fuera, y puesto al lado del rosa del logotipo se ve que es de otra
     familia (morado contra rosa calido). Ahora hay tres papeles separados:
       --u-accion   TINTA. Rellenos: botones, estados activos. Es tambien el
                    registro que pidio ella en el briefing, "luxury y minimalismo".
       --u-acento   ROSEWOOD. Acentos finos sobre crema: eyebrows, estrellas,
                    reglas, enlaces, foco. 5,78 de contraste sobre el crema, o sea
                    legible como texto. Es la version profunda del rosa del logotipo.
       --u-rosa     ROSA VIEJO. Solo superficie, NUNCA texto: 2,33 sobre crema.
                    Es la pastilla del logotipo. */
  --u-acento:var(--wp--preset--color--rosewood);
  --u-acento-dark:var(--wp--preset--color--rosewood-dark);
  --u-rosa:var(--wp--preset--color--rosa);
  --u-accion:var(--u-ink);
  /* Texto claro sobre el bloque de acento (rosewood). Hace falta un tono aparte
     del del pie: sobre tinta vale #CFC5B7 (9,58 de contraste), pero sobre
     rosewood ese mismo baja a 3,59 y no llega para texto. #E8D9CF da 4,45. */
  --u-sobre-acento:#E8D9CF;
  --u-line:var(--wp--preset--color--line);
  --u-white:var(--wp--preset--color--white);
  --u-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --u-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --u-content:1240px;
  --u-gap:clamp(1rem,2vw,1.75rem);
  --u-section:clamp(3.5rem,8vw,7rem);
  --u-radius:2px;
  --u-ease:cubic-bezier(.22,.61,.36,1);
}
/* Urbanika Shades — sistema visual de la demo.
   Base arena + tinta del monograma UBK; acento burdeos del logo horizontal.
   El magenta #F255A0 del banner se descarta a propósito: no aguanta en gama alta.
   Modo claro fijo a propósito: la demo se enseña en pantallas ajenas y tiene que
   verse siempre igual (sin prefers-color-scheme). */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--u-sand-50);color:var(--u-ink);
  font-family:var(--u-sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--u-serif);font-weight:400;margin:0;line-height:1.08;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,1.6rem + 4.2vw,4.6rem)}
h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)}
a{color:inherit}
.wrap{max-width:var(--u-content);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--u-acento);font-weight:600}
.btn{display:inline-block;padding:.95em 2em;border-radius:var(--u-radius);text-decoration:none;
  font-weight:600;font-size:.95rem;letter-spacing:.02em;transition:all var(--u-ease) .25s}
.btn-primary{background:var(--u-accion);color:#fff}
.btn-primary:hover{background:var(--u-acento)}
.btn-ghost{border:1px solid currentColor}

/* ============================================================
   Chrome compartido de la demo (header, footer, formulario,
   secciones). Duplicado a propósito del <style> de index.html:
   index conserva su copia inline; el resto de páginas cargan esta.
   ============================================================ */

/* ---------- demo bar + header ---------- */
.demobar{background:var(--u-acento-dark);color:#fff;font-size:.8rem;padding:.6rem 1rem;text-align:center;letter-spacing:.02em}
.demobar strong{color:var(--u-sobre-acento)}
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--u-sand-50) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--u-line)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:52px;width:auto}
.nav{display:flex;gap:1.5rem;align-items:center;font-size:.9rem}
.nav a{text-decoration:none;color:var(--u-ink-soft);font-weight:500}
.nav a:hover{color:var(--u-acento)}
.nav a.btn-primary{color:#fff}
.nav a.btn-primary:hover{color:#fff}
.nav .tel{font-weight:600;color:var(--u-ink)}
.lang{border:1px solid var(--u-line);border-radius:99px;padding:.3rem .8rem;font-size:.78rem;font-weight:600;text-decoration:none}
.nav .btn{padding:.65em 1.4em;font-size:.85rem}
.burger{display:none;background:none;border:1px solid var(--u-line);border-radius:var(--u-radius);padding:.45rem .7rem;font:inherit;cursor:pointer;color:var(--u-ink)}
@media(max-width:960px){
  .nav{display:none}
  .burger{display:block}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--u-sand-50);border-bottom:1px solid var(--u-line);padding:1.2rem clamp(1.1rem,4vw,2.5rem) 1.6rem;gap:1rem}
}

/* ---------- hero editorial partido ---------- */
.hero{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:clamp(560px,82vh,820px);position:relative;background:var(--u-sand-100)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,5vw,5rem) clamp(1.1rem,4.5vw,4.5rem) clamp(3.5rem,6vw,5.5rem) max(clamp(1.1rem,4vw,2.5rem),calc((100vw - var(--u-content))/2 + 2.5rem))}
.hero-copy .eyebrow{margin-bottom:1.3rem}
.hero h1{font-size:clamp(2.7rem,1.5rem + 4.6vw,5rem);font-weight:500;line-height:1.04}
.hero h1 em{font-style:italic;font-weight:400;color:var(--u-acento)}
.hero p.sub{max-width:46ch;font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:var(--u-ink-soft);margin:1.4rem 0 2.2rem}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.proofrow{display:flex;align-items:center;gap:.8rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--u-line);font-size:.9rem;color:var(--u-ink-soft)}
.proofrow .stars{color:var(--u-acento);letter-spacing:.12em;font-size:1rem}
.proofrow a{color:var(--u-ink);font-weight:600;text-decoration-color:var(--u-sand-300)}
.hero-visual{position:relative;min-height:420px}
.hero-visual>img.main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-inset{position:absolute;left:clamp(-120px,-8vw,-40px);bottom:clamp(2rem,5vh,4rem);width:clamp(220px,24vw,340px);border:6px solid var(--u-sand-50);box-shadow:0 24px 60px -24px rgba(36,31,26,.45);z-index:3}
.hero-seal{position:absolute;top:clamp(1.5rem,4vh,3rem);right:clamp(1.2rem,3vw,2.6rem);width:clamp(84px,8vw,120px);height:auto;background:rgba(251,248,243,.92);border-radius:50%;padding:6px;z-index:3}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{order:1;padding:2.6rem clamp(1.1rem,4vw,2.5rem) 2.8rem}
  .hero-visual{order:0;min-height:0;aspect-ratio:4/3}
  .hero-inset{display:none}
  .hero-seal{width:74px;top:1rem;right:1rem}
}

/* ---------- franja de credenciales ----------
   Rehecha el 7-sep-2026. Antes era una lista en linea con justify-content
   flex-start: las cinco credenciales no cabian en una fila, "Somfy
   motorization" caia solo a una segunda linea y la franja quedaba coja.
   Ahora son cinco columnas iguales dentro de una caja con filete, el mismo
   lenguaje que el muro de clientes que va justo debajo.

   Las celdas se alinean POR ARRIBA y las estrellas tienen hueco reservado en
   las cinco: asi las cinco cifras caen sobre la misma linea, que es lo unico
   que hace que esto se lea como una franja de datos y no como cinco frases
   sueltas. Alineadas por abajo, la etiqueta de dos lineas del BBB empujaba
   su "A+" por encima del resto y la fila se veia rota. */
.creds{background:var(--u-white);border-top:1px solid var(--u-line);border-bottom:1px solid var(--u-line)}
.creds-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);
  border-inline:1px solid var(--u-line)}
.cred{display:flex}
.cred + .cred{border-left:1px solid var(--u-line)}
.cred-box{flex:1;display:flex;flex-direction:column;align-items:flex-start;
  padding:1.35rem clamp(.9rem,1.6vw,1.5rem) 1.5rem;
  color:inherit;text-decoration:none;transition:background .25s var(--u-ease)}

/* hueco de estrellas reservado en las cinco celdas, tengan o no */
.cred-box::before{content:"";display:block;height:.72rem;margin-bottom:.5rem}
/* fijadas al hueco que reserva el ::before, no a la posicion estatica:
   sin top/left explicitos bailan en cuanto cambie el orden del marcado */
.cred-stars{position:absolute;top:1.35rem;left:clamp(.9rem,1.6vw,1.5rem);
  color:var(--u-acento);font-size:.72rem;letter-spacing:.16em;line-height:.72rem}
.cred-box{position:relative}

.cred-value{font-family:var(--u-serif);font-size:1.9rem;line-height:1;color:var(--u-ink);
  font-weight:500;font-variant-numeric:lining-nums tabular-nums;
  transition:color .25s var(--u-ease)}
.cred-label{margin-top:.5rem;font-size:.78rem;line-height:1.4;color:var(--u-ink-soft);
  letter-spacing:.02em;text-wrap:pretty;max-width:24ch}

/* Solo tres de las cinco llevan enlace a la fuente que las respalda. La zona
   de click es la celda entera, no tres palabras subrayadas, y la flecha avisa
   de que se abre fuera sin ocupar una linea propia. */
a.cred-box .cred-value::after{content:"\2197";font-family:var(--u-sans);font-size:.6em;
  vertical-align:.55em;margin-left:.28em;color:var(--u-sand-300);
  transition:color .25s var(--u-ease),transform .25s var(--u-ease);display:inline-block}
a.cred-box:hover{background:var(--u-sand-50)}
a.cred-box:hover .cred-value{color:var(--u-acento)}
a.cred-box:hover .cred-value::after{color:var(--u-acento)}
a.cred-box:hover .cred-label{color:var(--u-ink)}
a.cred-box:focus-visible{outline:2px solid var(--u-acento);outline-offset:-3px;background:var(--u-sand-50)}

/* El badge de Expertise ocupa el sitio de cifra + etiqueta: ya lleva su texto dentro.
   Se come el hueco de estrellas para quedar a la altura de las otras cuatro. */
.cred-box--badge{align-items:center;justify-content:center;padding-block:.8rem}
.cred-box--badge::before{display:none}
.cred-badge{display:block;height:6.2rem;width:auto}
@media(max-width:1080px){
  .cred-value{font-size:1.6rem}
  .cred-label{font-size:.74rem}
  .cred-box{padding-inline:1rem}
  .cred-stars{left:1rem}
}

/* Movil: en dos columnas las cinco celdas dejaban una huerfana, y apiladas
   en columna ocupaban 564 px, media pantalla de telefono para una franja que
   solo acompana. Van en fila: la cifra a la izquierda con ancho fijo, para que
   las cinco caigan en la misma vertical, y la etiqueta al lado. Se lee de
   arriba abajo como una lista de credenciales y baja a la mitad de alto. */
@media(max-width:760px){
  .creds-grid{grid-template-columns:1fr}
  .cred + .cred{border-left:0;border-top:1px solid var(--u-line)}
  .cred-box{flex-direction:row;align-items:baseline;gap:.9rem;
    padding:.95rem clamp(.9rem,4vw,1.3rem)}
  .cred-box::before{display:none}
  .cred-value{font-size:1.5rem;min-width:5rem;flex:none}
  .cred-label{margin-top:0;max-width:none;font-size:.8rem}
  /* la de resenas es la unica con estrellas: sitio arriba solo para ella */
  .cred--lead .cred-box{padding-top:1.75rem}
  .cred-stars{top:.7rem;left:clamp(.9rem,4vw,1.3rem)}
  .cred-box--badge{justify-content:flex-start;padding-block:.7rem}
  .cred-badge{height:4.2rem}
}

/* ---------- muro de clientes (versión corregida: color y a la primera) ---------- */
.clients{background:var(--u-white)}
.clients .sec-head{text-align:center;margin-inline:auto}
.logowall{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--u-line);border-left:1px solid var(--u-line)}
.logowall .cell{display:grid;place-items:center;height:120px;border-right:1px solid var(--u-line);border-bottom:1px solid var(--u-line);padding:1.2rem;background:var(--u-white)}
.logowall img{max-height:64px;max-width:165px;width:auto;height:auto}
.clients .note{text-align:center}
@media(max-width:900px){.logowall{grid-template-columns:repeat(2,1fr)}.logowall .cell{height:96px}.logowall img{max-height:48px;max-width:130px}}
/* override con especificidad extra: gana también al <style> inline de index.html */
.clients .logowall img{filter:none;opacity:1;max-height:64px;max-width:165px}
@media(max-width:900px){.clients .logowall img{max-height:48px;max-width:130px}}

/* ---------- secciones genéricas ---------- */
section{padding-block:var(--u-section)}
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head p{color:var(--u-ink-soft);font-size:1.05rem;margin:.9rem 0 0}
.alt{background:var(--u-sand-100)}
.note{font-size:.85rem;color:var(--u-ink-soft);margin-top:1rem}

/* ---------- retícula editorial de producto ---------- */
.prodgrid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:250px;gap:clamp(.8rem,1.5vw,1.2rem)}
.tile{position:relative;overflow:hidden;border-radius:var(--u-radius);text-decoration:none;color:#fff;display:block;background:var(--u-ink)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--u-ease)}
.tile:hover img{transform:scale(1.045)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(20,16,12,0) 32%,rgba(20,16,12,.45) 68%,rgba(20,16,12,.88) 100%)}
.tile .cap{position:absolute;left:1.4rem;right:1.4rem;bottom:1.2rem;z-index:2}
.tile h3{color:#fff;font-weight:500;margin-bottom:.15rem;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.tile .cap p{margin:0;font-size:.85rem;color:#E9E1D4;opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.tile .cap .go{display:inline-block;margin-top:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--u-rosa)}
.t-a{grid-column:span 7;grid-row:span 2}
.t-b,.t-c{grid-column:span 5}
.t-d{grid-column:span 5;grid-row:span 2}
.t-e,.t-f{grid-column:span 7}
.t-g,.t-h{grid-column:span 6}
@media(max-width:860px){
  .prodgrid{grid-auto-rows:230px}
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g,.t-h{grid-column:span 12;grid-row:span 1}
  .t-a,.t-d{grid-row:span 1}
  .tile::after{background:linear-gradient(185deg,rgba(20,16,12,0) 6%,rgba(20,16,12,.5) 42%,rgba(20,16,12,.92) 100%)}
  .nav.open a{padding-block:.35rem}
}

/* ---------- banda de datos Miami (oscura) ---------- */
.facts{display:grid;gap:1px;background:#3A342C;border:1px solid #3A342C;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------- tabla de precios ---------- */
table.price{width:100%;border-collapse:collapse;font-size:.95rem}
table.price th,table.price td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--u-line)}
table.price th{font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--u-ink-soft)}
table.price td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.tag-demo{display:inline-block;background:#FCE9A0;color:#5A4200;font-size:.62rem;font-weight:700;letter-spacing:.08em;padding:.15em .5em;border-radius:3px;vertical-align:middle;margin-left:.45rem;text-transform:uppercase}
.tablewrap{overflow-x:auto}

/* ---------- splits, pasos, fundadora ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
blockquote.law{border-left:3px solid var(--u-acento);padding:.3rem 0 .3rem 1.4rem;margin:1.6rem 0;font-style:italic;color:var(--u-ink-soft)}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:1.6rem}
ol.steps li{counter-increment:s;padding-left:3.4rem;position:relative}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-.15rem;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--u-acento);color:var(--u-acento);display:grid;place-items:center;font-family:var(--u-serif);font-size:1.1rem}
ol.steps strong{display:block;margin-bottom:.2rem}
ol.steps span{font-size:.92rem;color:var(--u-ink-soft)}
.founder{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.founder-visual{position:relative;justify-self:center}
.founder-visual img.face{border-radius:50%;width:min(300px,70vw);height:auto;border:8px solid var(--u-white);box-shadow:0 18px 50px -22px rgba(36,31,26,.4)}
.founder-visual img.badge{position:absolute;right:-14px;bottom:-10px;width:118px;height:auto;border-radius:50%;box-shadow:0 10px 26px -12px rgba(36,31,26,.45)}
.founder h2{margin-bottom:.4rem}
.founder .role{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--u-acento);font-weight:600;margin:0 0 1.2rem}
.founder p{color:var(--u-ink-soft)}
@media(max-width:820px){.founder{grid-template-columns:1fr}}

/* ---------- reseñas ---------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2rem,4vw,3rem)}
.rev-score{display:flex;align-items:center;gap:1.2rem}
.rev-score .big{font-family:var(--u-serif);font-size:4.4rem;line-height:1;font-weight:500}
.rev-score .st{color:var(--u-acento);letter-spacing:.1em;font-size:1.05rem}
.rev-score p{margin:.2rem 0 0;font-size:.9rem;color:var(--u-ink-soft)}
.rev-score a{color:var(--u-ink);font-weight:600;text-decoration-color:var(--u-sand-300)}
.quotes{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
figure.q p{margin:0 0 1.2rem;font-family:var(--u-serif);font-size:1.22rem;line-height:1.5;position:relative}
figure.q figcaption{font-size:.83rem;color:var(--u-ink-soft);font-weight:600}
figure.q figcaption span{display:block;font-weight:400;color:var(--u-sand-300);font-size:.76rem;margin-top:.15rem}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--u-line);padding:1.15rem 0}
details.faq summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--u-acento);font-size:1.4rem;line-height:1;transition:transform .25s}
details.faq[open] summary::after{content:"\2212"}
details.faq p{margin:.9rem 0 0;color:var(--u-ink-soft);font-size:.95rem;max-width:70ch}

/* ---------- Instagram ---------- */
.ig-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1vw,.9rem)}
.iggrid a{position:relative;display:block;overflow:hidden;border-radius:var(--u-radius)}
.iggrid img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;transition:transform .7s var(--u-ease)}
.iggrid a:hover img{transform:scale(1.06)}
.iggrid a::after{content:"@urbanikashades";position:absolute;inset:0;display:grid;place-items:center;background:rgba(77,30,52,.55);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.08em;opacity:0;transition:opacity .35s}
.iggrid a:hover::after{opacity:1}
@media(max-width:860px){.iggrid{grid-template-columns:repeat(3,1fr)}}

/* ---------- tarjetas / guías ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--u-ease),box-shadow .35s var(--u-ease);text-decoration:none;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px -18px rgba(36,31,26,.35)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .body{padding:1.3rem 1.4rem 1.6rem}
.card h3{margin-bottom:.5rem;font-size:1.25rem}
.card p{margin:0;font-size:.93rem;color:var(--u-ink-soft)}
.card .go{margin-top:.9rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--u-acento)}

/* ---------- zonas ---------- */
.zones{display:flex;flex-wrap:wrap;gap:.5rem}
.zones span{border:1px solid var(--u-line);border-radius:99px;padding:.35rem .9rem;font-size:.85rem;color:var(--u-ink-soft)}

/* ---------- formulario ---------- */
.quote-sec{background:var(--u-acento);color:#fff}
.quote-grid{display:grid;grid-template-columns:minmax(300px,5fr) minmax(320px,6fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.quote-sec h2{color:#fff}
.quote-sec .eyebrow{color:var(--u-sobre-acento)}
.quote-sec .lead{color:var(--u-sobre-acento);font-size:1.05rem;margin:1rem 0 1.8rem;max-width:44ch}
.quote-points{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.8rem}
.quote-points li{padding-left:1.6rem;position:relative;font-size:.95rem;color:var(--u-sobre-acento)}
.quote-points li::before{content:"\2014";position:absolute;left:0;color:var(--u-sobre-acento)}
.quote-alt{border-top:1px solid rgba(255,255,255,.18);padding-top:1.6rem;font-size:.92rem;color:var(--u-sobre-acento)}
.quote-alt a{color:#fff;font-weight:600}
/* El disparador del cualificador va dentro de un parrafo y tiene que leerse
   como los enlaces de al lado, pero es un <button>: sin boton nativo no hay
   forma accesible de anunciar que abre un dialogo. */
/* Fotos que no son apaisadas: acotadas y centradas. Sin esto una foto cuadrada
   sale a los 800 px del contenedor, que ademas suele ser mas de lo que da el
   fichero. Ver bin/render_paginas.py, bloque "foto". */
.foto-acotada{max-width:420px;margin-inline:auto}
.foto-acotada img{width:100%;height:auto;display:block;border-radius:var(--u-radius)}

.walink{background:none;border:0;padding:0;font:inherit;color:#fff;font-weight:600;
  text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.walink:hover{text-decoration-thickness:2px}
.walink:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:2px}
form.quote{background:var(--u-sand-50);color:var(--u-ink);padding:clamp(1.6rem,3vw,2.6rem);border-radius:4px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
form.quote .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form.quote .field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
form.quote label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--u-ink-soft)}
form.quote input,form.quote select,form.quote textarea{font:inherit;font-size:.95rem;padding:.7em .8em;border:1px solid var(--u-sand-300);border-radius:var(--u-radius);background:var(--u-white);color:var(--u-ink);width:100%}
form.quote input:focus,form.quote select:focus,form.quote textarea:focus{outline:2px solid var(--u-acento);outline-offset:1px;border-color:var(--u-acento)}
form.quote textarea{min-height:110px;resize:vertical}
form.quote button{width:100%;border:0;cursor:pointer;font-family:var(--u-sans)}
form.quote .fine{font-size:.78rem;color:var(--u-ink-soft);margin:.9rem 0 0;text-align:center}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr}form.quote .frow{grid-template-columns:1fr}}

/* ---------- footer ----------
   Reescrito el 4-sep-2026. El pie de WordPress no usaba ninguna de estas
   reglas: servia columnas de bloques sin clase y un wp:navigation sin menu,
   que caia en la lista automatica de paginas. Ahora lo sirve
   patterns/footer.php con estas clases. */
footer.site{background:var(--u-ink);color:#CFC5B7;font-size:.9rem;
  padding-block:clamp(3rem,6vw,4.5rem) 0;margin-top:0}
footer.site a{color:#CFC5B7;text-decoration:none;
  transition:color var(--u-ease) .2s}
footer.site a:hover{color:var(--u-white);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:#6B6053}
footer.site a:focus-visible{outline:2px solid var(--u-sand-200);outline-offset:3px;border-radius:1px}

.fgrid{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(240px,1.35fr) repeat(3,minmax(150px,1fr));
  padding-bottom:clamp(2.4rem,5vw,3.5rem)}

footer h4{font-family:var(--u-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#8C8175;margin:0 0 1rem}
footer h4.mt{margin-top:2rem}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
footer li{line-height:1.45}

.flogo{height:112px;width:auto;margin:0 0 1.3rem}
.fclaim{margin:0 0 1.3rem;color:#A79C8D;max-width:34ch;font-size:.9rem}
.fcontact{gap:.5rem}
.fcontact .ftel{font-size:1.15rem;font-family:var(--u-serif);letter-spacing:.01em;color:var(--u-white)}
.fdir{margin-top:.35rem;font-size:.9rem;line-height:1.5;font-style:normal}
.fdir .fcita{color:#8C8175;font-size:.82rem}
.fnote{margin:.9rem 0 0;font-size:.82rem;color:#8C8175}
.fcta{margin-top:1.5rem;font-size:.82rem;padding:.75em 1.4em;color:#CFC5B7;
  border-color:#4A4239;display:inline-block;line-height:1.3}
.fcta:hover{background:var(--u-acento);border-color:var(--u-acento);color:#fff;text-decoration:none}

.fbottom{border-top:1px solid #3A342C;padding-block:1.5rem 2.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.8rem;color:#8C8175}
.fbottom p{margin:0}

@media(max-width:900px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem}
  .fbrand{grid-column:1 / -1}
}
@media(max-width:520px){
  .fgrid{grid-template-columns:1fr}
  .fbottom{flex-direction:column}
}

/* ---------- páginas interiores: migas, cabecera de página y artículos ---------- */
.crumb{font-size:.82rem;color:var(--u-ink-soft);padding-top:1.4rem}
.crumb a{color:var(--u-acento);text-decoration-color:var(--u-sand-300)}
.phero{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:minmax(0,52fr) minmax(0,48fr);align-items:center;padding-block:clamp(2.2rem,5vw,4rem) clamp(2.8rem,6vw,4.5rem)}
.phero h1{font-size:clamp(2.3rem,1.4rem + 3.4vw,4rem);font-weight:500;line-height:1.06}
.phero h1 em{font-style:italic;font-weight:400;color:var(--u-acento)}
.phero p.sub{color:var(--u-ink-soft);font-size:clamp(1rem,.95rem + .25vw,1.12rem);margin:1.2rem 0 2rem;max-width:48ch}
.phero .eyebrow{display:block;margin-bottom:1.1rem}
.phero-visual{position:relative}
.phero-visual img.main{border-radius:var(--u-radius);aspect-ratio:4/5;object-fit:cover;width:100%}
.phero-visual img.inset{position:absolute;left:clamp(-70px,-4vw,-30px);bottom:2rem;width:clamp(180px,18vw,260px);border:6px solid var(--u-sand-50);box-shadow:0 24px 60px -24px rgba(36,31,26,.45)}
@media(max-width:900px){.phero{grid-template-columns:1fr}.phero-visual img.main{aspect-ratio:16/10}}
table.data{width:100%;border-collapse:collapse;font-size:.93rem;background:var(--u-white)}
table.data th,table.data td{text-align:left;padding:.9rem .8rem;border-bottom:1px solid var(--u-line);vertical-align:top}
table.data thead th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--u-ink-soft);background:var(--u-sand-100);border-bottom:1px solid var(--u-line)}
table.data td:last-child{white-space:nowrap;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
table.data.open td:last-child{text-align:left;white-space:normal;font-weight:400}
.tablewrap.framed{border:1px solid var(--u-line);border-radius:var(--u-radius)}
/* artículo de guía */
.article-head{max-width:760px;margin-inline:auto;text-align:center;padding-block:clamp(2.4rem,5vw,4rem) clamp(1.8rem,3vw,2.6rem)}
.article-head h1{font-size:clamp(2.1rem,1.3rem + 3vw,3.4rem);font-weight:500;line-height:1.1}
.article-head .meta{margin-top:1.1rem;font-size:.82rem;color:var(--u-ink-soft);letter-spacing:.04em}
.article-hero{max-width:1000px;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.article-hero img{border-radius:var(--u-radius);width:100%;aspect-ratio:21/9;object-fit:cover}
.prose{max-width:720px;margin-inline:auto;padding-block:clamp(2.2rem,4vw,3.4rem)}
.prose h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);margin:2.6rem 0 1rem}
.prose h3{font-size:1.25rem;margin:2rem 0 .7rem;font-family:var(--u-sans);font-weight:600}
.prose p{margin:0 0 1.15rem;color:var(--u-ink-soft)}
.prose p strong,.prose li strong{color:var(--u-ink)}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.3rem;color:var(--u-ink-soft)}
.prose li{margin-bottom:.55rem}
.prose blockquote{border-left:3px solid var(--u-acento);padding:.3rem 0 .3rem 1.4rem;margin:1.8rem 0;font-style:italic;color:var(--u-ink-soft)}
.prose blockquote strong{font-style:normal;font-size:.85rem}
.prose .tablewrap{margin:1.6rem 0}
.prose cite{font-style:normal;font-size:.8rem;color:var(--u-sand-300);display:block;margin-top:.3rem}
.keyfacts{background:var(--u-sand-100);border:1px solid var(--u-line);border-radius:var(--u-radius);padding:1.4rem 1.6rem;margin:0 0 2rem}
.keyfacts h2{margin:0 0 .8rem;font-size:1.1rem;font-family:var(--u-sans);font-weight:600;letter-spacing:.02em}
.keyfacts ul{margin:0;padding-left:1.2rem}
.keyfacts li{margin-bottom:.45rem;font-size:.93rem;color:var(--u-ink-soft)}
.article-cta{background:var(--u-sand-100);border:1px solid var(--u-line);border-radius:var(--u-radius);padding:1.8rem 1.8rem;margin-top:2.6rem;text-align:center}
.article-cta p{margin:0 0 1.2rem;color:var(--u-ink-soft)}
.article-cta .h{font-family:var(--u-serif);font-size:1.5rem;color:var(--u-ink);display:block;margin-bottom:.5rem}

/* ---------- cualificador de WhatsApp ---------- */
.wa-qualifier{background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-radius);
  padding:clamp(1.4rem,3vw,2.4rem);max-width:640px}
.wa-qualifier h2{margin:.3rem 0 1.4rem}
.wa-q{font-weight:600;font-size:.95rem;margin:0 0 .6rem}
.wa-ops{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.wa-op{font:inherit;font-size:.9rem;cursor:pointer;background:var(--u-sand-50);color:var(--u-ink);
  border:1px solid var(--u-line);border-radius:99px;padding:.55rem 1.1rem;transition:all var(--u-ease) .2s;min-height:44px}
.wa-op:hover{border-color:var(--u-acento);color:var(--u-acento)}
.wa-op.is-on{background:var(--u-accion);border-color:var(--u-accion);color:#fff}
.wa-extra label{font-size:.85rem;color:var(--u-ink-soft);display:block;margin-bottom:1.2rem}
.wa-extra span{color:var(--u-sand-300)}
.wa-extra input{display:block;margin-top:.35rem;font:inherit;padding:.6rem .8rem;border:1px solid var(--u-line);
  border-radius:var(--u-radius);background:var(--u-sand-50);width:8rem;min-height:44px}
.wa-cta{display:inline-block}

/* ---------- datos de ejemplo: que se vean, y que no salgan vivos ---------- */
[data-ph]{outline:2px dashed var(--u-acento);outline-offset:3px;position:relative}
[data-ph]::after{content:"EJEMPLO: " attr(data-ph);position:absolute;top:0;left:0;z-index:9;
  background:var(--u-acento);color:#fff;font:600 10px/1.6 var(--u-sans);letter-spacing:.08em;
  text-transform:uppercase;padding:.1rem .5rem;white-space:nowrap}
img[data-ph]:not([src]),img[data-ph][src=""]{min-height:200px;background:var(--u-sand-100);display:block}

/* ---------- submenu de la cabecera ---------- */
.nav .has-sub{position:relative;display:inline-flex;align-items:center}
.nav .has-sub>a::after{content:"▾";font-size:.7em;margin-left:.3em;color:var(--u-sand-300)}
.nav .sub{position:absolute;top:100%;left:-1rem;min-width:230px;background:var(--u-white);
  border:1px solid var(--u-line);border-radius:var(--u-radius);box-shadow:0 18px 40px -22px rgba(36,31,26,.45);
  padding:.6rem 0;display:none;flex-direction:column;z-index:60}
.nav .sub a{padding:.5rem 1.2rem;font-size:.88rem}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:flex}
@media(max-width:960px){
  .nav .has-sub{display:block;width:100%}
  .nav .sub{position:static;display:flex;border:0;box-shadow:none;padding:.3rem 0 .3rem 1rem;background:none;min-width:0}
  .nav .sub a{padding:.35rem 0}
}

/* ---------- ajustes de cabecera para el menu largo del briefing ---------- */
.nav{gap:1.05rem}
.nav .tel,.nav .btn,.nav .lang{white-space:nowrap}
@media(max-width:1200px){ .nav .tel{display:none} }

/* ============================================================
   Ajustes de la web definitiva sobre el sistema de la demo.
   Aqui va lo que la demo no tenia: reticula automatica, tarjeta
   de testimonio, formulario de Contact Form 7 y el ritmo vertical.
   ============================================================ */

/* ---------- ritmo vertical: la demo alternaba fondos, aqui no siempre ---------- */
:root{ --u-section:clamp(2.6rem,5.5vw,4.6rem); }
main section{padding-block:var(--u-section)}
main section + section{margin-top:0}
main .entry-content > section{margin-top:0}
/* dos secciones seguidas del mismo color no necesitan doble aire */
main section:not(.alt):not(.clients):not(.quote-sec) + section:not(.alt):not(.clients):not(.quote-sec){padding-top:0}
.sec-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}

/* ---------- reticula de producto que aguanta cualquier numero de fichas ---------- */
.prodgrid.auto{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));grid-auto-rows:300px}
@media(max-width:640px){ .prodgrid.auto{grid-auto-rows:230px} }
.tile .cap h3{font-size:1.3rem}

/* ---------- tarjeta de testimonio ---------- */
.quote-card{margin:0;max-width:760px;background:var(--u-white);border:1px solid var(--u-line);
  border-left:3px solid var(--u-acento);border-radius:var(--u-radius);padding:clamp(1.6rem,3vw,2.4rem)}
.quote-card blockquote{margin:0;font-family:var(--u-serif);font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  line-height:1.45;color:var(--u-ink)}
.quote-card figcaption{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.15rem 1rem;align-items:baseline;
  font-size:.85rem;color:var(--u-ink-soft)}
.quote-card figcaption strong{color:var(--u-ink)}

/* ---------- tablas: que se lean, no que quepan ---------- */
.tablewrap{overflow-x:auto}
.tablewrap.framed{border:1px solid var(--u-line);border-radius:var(--u-radius);background:var(--u-white)}
table.data{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
table.data th{text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--u-ink-soft);font-weight:600;padding:1rem 1.1rem;border-bottom:1px solid var(--u-line);vertical-align:bottom}
table.data td{padding:.95rem 1.1rem;border-bottom:1px solid var(--u-line);vertical-align:top;color:var(--u-ink-soft)}
table.data td:first-child{color:var(--u-ink);font-weight:500}
table.data tr:last-child td{border-bottom:0}

/* ---------- pasos numerados ---------- */
ol.steps li p{margin:.35rem 0 0;color:var(--u-ink-soft);font-size:.95rem;max-width:62ch}

/* ---------- formulario: Contact Form 7 con la piel de la demo ---------- */
.quote-form .wpcf7{margin:0}
.quote-form form{background:var(--u-sand-50);color:var(--u-ink);padding:clamp(1.5rem,3vw,2.4rem);
  border-radius:4px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.quote-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.quote-form p{margin:0 0 1rem}
.quote-form label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--u-ink-soft)}
.quote-form input[type=text],.quote-form input[type=tel],.quote-form input[type=email],
.quote-form select,.quote-form textarea{font:inherit;font-size:.95rem;padding:.7em .8em;margin-top:.35rem;
  border:1px solid var(--u-sand-300);border-radius:var(--u-radius);background:var(--u-white);
  color:var(--u-ink);width:100%;min-height:46px}
.quote-form textarea{min-height:104px;resize:vertical}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{
  outline:2px solid var(--u-acento);outline-offset:1px;border-color:var(--u-acento)}
.quote-form input[type=submit]{width:100%;border:0;cursor:pointer;background:var(--u-accion);color:#fff;
  font-weight:600;font-size:.98rem;letter-spacing:.02em;padding:1em 2em;border-radius:var(--u-radius);
  transition:background var(--u-ease) .25s;min-height:52px}
.quote-form input[type=submit]:hover{background:var(--u-acento)}
.quote-form .note{font-size:.78rem;color:var(--u-ink-soft);margin:.9rem 0 0;text-align:center}
.quote-form .wpcf7-spinner{display:block;margin:.6rem auto 0}
.quote-form .wpcf7-not-valid-tip{color:#B3261E;font-size:.78rem;text-transform:none;letter-spacing:0;margin-top:.3rem}
.quote-form .wpcf7-response-output{margin:1rem 0 0;padding:.8rem 1rem;border-radius:var(--u-radius);
  font-size:.88rem;border:1px solid var(--u-sand-300);background:var(--u-white)}
.quote-form input[type=hidden]{display:none}
/* Casilla de consentimiento SMS (A2P 10DLC): opcional, sin marcar, texto legible y no en mayusculas. */
.quote-form .sms-consent .wpcf7-list-item{margin:0}
.quote-form .sms-consent label{display:flex;gap:.6rem;align-items:flex-start;font-size:.72rem;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.5;color:var(--u-ink-soft)}
.quote-form .sms-consent input[type=checkbox]{margin:.15rem 0 0;flex-shrink:0;width:16px;height:16px;
  accent-color:var(--u-accion)}
.quote-form .sms-consent a{color:inherit;text-decoration:underline}
@media(max-width:900px){ .quote-form .frow{grid-template-columns:1fr} }

/* ---------- contraste: lo que se veia flojo ---------- */
.note{color:var(--u-ink-soft)}
.tile .cap .go{color:var(--u-rosa)}
.zones span{background:var(--u-white)}

/* ---------- medida de lectura: 1240px de ancho no se lee ---------- */
main section p:not(.sub):not(.note):not(.lead):not(.quote-alt),
main section ol.steps,
main section .sec-head p{max-width:72ch}
.quote-card blockquote{max-width:none}

/* ---------- el textarea de CF7 venia con 10 filas ---------- */
.quote-form textarea{height:110px;min-height:110px}
.quote-form .frow + p label{margin-top:0}

/* ---------- fichas: el titulo tiene que leerse tambien sobre foto clara ---------- */
.tile::after{background:linear-gradient(185deg,rgba(20,16,12,0) 8%,rgba(20,16,12,.5) 45%,rgba(20,16,12,.9) 100%)}
.tile .cap h3{text-shadow:0 1px 18px rgba(0,0,0,.75)}
.tile .cap p{text-shadow:0 1px 14px rgba(0,0,0,.7);opacity:1}

/* ---------- el hero no necesita 112px de aire por encima ---------- */
main .entry-content > section:first-child{padding-top:0}
main .entry-content > section:first-child .phero{padding-top:clamp(1.2rem,2.5vw,2.4rem)}

/* ---------- boton flotante de WhatsApp y su cualificador ----------
   Anadido el 4-sep-2026. El CTA principal de la web es el formulario;
   WhatsApp entra por aqui, y siempre despues de las tres preguntas.
   El verde es el de WhatsApp a proposito: es el unico sitio de la web que
   se sale de la gama arena y tinta, porque el boton tiene que leerse como
   lo que es en dos decimas de segundo. */
:root{--wa-verde:#25D366;--wa-verde-osc:#1EB055;--wa-teal:#075E54;--wa-chat:#ECE5DD}

.wa-fab{position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:60;
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--wa-verde);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.45);
  transition:transform var(--u-ease) .2s,background var(--u-ease) .2s}
.wa-fab:hover{background:var(--wa-verde-osc);transform:scale(1.06)}
.wa-fab:active{transform:scale(.96)}
.wa-fab:focus-visible{outline:3px solid var(--u-ink);outline-offset:3px}
.wa-ico{width:32px;height:32px}
body.wa-open .wa-fab{opacity:0;pointer-events:none}   /* si no, se ve tras el velo */

.wa-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.wa-modal{align-items:center;padding:1.5rem}}
.wa-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.wa-panel{position:relative;width:100%;max-width:460px;max-height:88dvh;overflow:hidden;
  display:flex;flex-direction:column;background:var(--wa-chat);color:var(--u-ink);
  border-radius:14px 14px 0 0;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
@media(min-width:640px){.wa-panel{border-radius:14px}}

.wa-head{display:flex;align-items:center;gap:.8rem;background:var(--wa-teal);color:#fff;
  padding:.9rem 1.1rem;flex-shrink:0}
.wa-head .wa-ico{width:26px;height:26px;flex-shrink:0}
.wa-head h2{font-size:1.05rem;font-family:var(--u-sans);font-weight:600;line-height:1.25;
  flex:1;min-width:0;color:#fff}
.wa-x{background:0;border:0;color:rgba(255,255,255,.75);font-size:1.7rem;line-height:1;
  cursor:pointer;padding:0 .2rem}
.wa-x:hover{color:#fff}

.wa-body{overflow-y:auto;overscroll-behavior:contain;padding:1.2rem 1.1rem 1.5rem}
.wa-saludo{background:#fff;border-radius:10px 10px 10px 2px;padding:.7rem .9rem;margin:0 0 1.2rem;
  font-size:.9rem;max-width:85%;box-shadow:0 1px 2px rgba(0,0,0,.12)}

.wa-q{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.92rem;margin:0 0 .6rem}
.wa-n{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--wa-teal);color:#fff;font-size:.72rem;flex-shrink:0}
.wa-ops{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.wa-op{font:inherit;font-size:.85rem;padding:.5em 1em;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid var(--u-sand-300);color:var(--u-ink-soft);
  transition:all var(--u-ease) .15s}
.wa-op:hover{border-color:var(--wa-verde)}
.wa-op.is-on{background:#DCF8C6;border-color:var(--wa-verde);color:var(--wa-teal);font-weight:600}
.wa-op:focus-visible{outline:2px solid var(--wa-teal);outline-offset:2px}

.wa-extra{margin:0 0 1rem}
.wa-extra label{font-size:.82rem;font-weight:600;color:var(--u-ink-soft);display:block}
.wa-extra span{font-weight:400}
.wa-zip{font:inherit;font-size:16px;margin-top:.35rem;padding:.55em .7em;width:9rem;display:block;
  border:1px solid var(--u-sand-300);border-radius:var(--u-radius);background:#fff}

.wa-falta{margin:0;padding:.85em 1em;border-radius:8px;text-align:center;
  background:rgba(255,255,255,.6);border:1px dashed var(--u-sand-300);
  color:var(--u-ink-soft);font-size:.82rem}
.wa-cta{display:block;text-align:center;text-decoration:none;background:var(--wa-verde);color:#fff;
  padding:.95em 1.2em;border-radius:8px;font-weight:600;font-size:.95rem;
  transition:background var(--u-ease) .2s}
.wa-cta:hover{background:var(--wa-verde-osc);color:#fff}
.wa-nota{margin:.8rem 0 0;font-size:.78rem;color:var(--u-ink-soft);text-align:center}

@media(prefers-reduced-motion:reduce){.wa-fab{transition:none}.wa-fab:hover{transform:none}}

/* Las cinco lineas que el cliente pidio bajo el CTA (punto 1 del briefing
   del 4-sep-2026). En linea y discretas: el punto 7 del mismo briefing pide
   que la portada no quede cargada. */
.hero-points{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;
  gap:.4rem 1.4rem;font-size:.82rem;color:var(--u-ink-soft);letter-spacing:.01em}
.hero-points li{position:relative;padding-left:.95rem}
.hero-points li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--u-sand-300)}

/* CRITICO: .wa-modal declara display:flex, que por especificidad le gana al
   atributo [hidden] (que solo aporta display:none del user-agent). Sin esta
   regla el cualificador se muestra solo al cargar cualquiera de las 34
   paginas. Detectado el 4-sep-2026 en la primera captura, no en el HTML. */
.wa-modal[hidden]{display:none}

/* Las etiquetas del briefing son mas largas ("Plantation shutters", "About us")
   y partian la barra en dos lineas. Ningun elemento del menu se parte. */
.nav > a,.nav .has-sub > a{white-space:nowrap}
@media(max-width:1330px){ .nav{gap:.85rem;font-size:.86rem} }

/* El logo nunca cede ancho. En espanol las etiquetas son mas largas ("Cortinas
   de tela", "Plantation shutters", "Sobre nosotros") y el flex le comia el
   ancho a la marca hasta dejarla en 0 px: la cabecera salia sin logo y la
   imagen cargaba igual, asi que no habia ni error de red ni nada en consola.
   Detectado el 4-sep-2026 mirando la portada en espanol, no el HTML. */
.brand{flex-shrink:0}
.brand img{height:52px;width:auto;max-width:none}
@media(max-width:1430px){ .nav{gap:.8rem;font-size:.85rem} }
@media(max-width:1240px){ .nav .lang{display:none} }

/* Iconos sociales del pie. Sustituyen al "@urbanikashades" en texto (4-sep-2026).
   LinkedIn: linkedin.com/company/urbanikashades, id 68367610, verificado en
   recon/06 el 27-ago-2026. Area de toque de 44 px, que es el minimo accesible,
   aunque el icono dibuje 20. */
.fsocial{display:flex;gap:.35rem;margin-top:1.2rem;list-style:none;padding:0}
.fsocial a{display:grid;place-items:center;width:44px;height:44px;margin-left:-11px;
  color:#A79C8D;border-radius:50%;transition:color var(--u-ease) .2s,background var(--u-ease) .2s}
.fsocial li:not(:first-child) a{margin-left:0}
.fsocial a:hover{color:var(--u-white);background:rgba(255,255,255,.08);text-decoration:none}
.fsocial a:focus-visible{outline:2px solid var(--u-sand-200);outline-offset:0}
.fsocial svg{width:20px;height:20px;fill:currentColor;display:block}

/* ---- Compatibilidad por voz (patron urbanika/works-with) --------------------
   Los logos van en SVG inline, no como imagen: escalan, no piden peticion y no
   se descargan de un CDN de terceros. Marcas de Amazon y Google, uso nominativo
   para declarar compatibilidad; el aviso de titularidad va en el pie del bloque. */
.voice{background:var(--u-sand-50)}
.voice .sec-head{text-align:center;margin-inline:auto;max-width:52ch}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--u-line);border-left:1px solid var(--u-line);background:var(--u-white)}
.voice-card{border-right:1px solid var(--u-line);border-bottom:1px solid var(--u-line);
  padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.7rem}
.voice-mark{height:62px;display:flex;align-items:center}
.voice-mark svg{width:54px;height:54px;display:block;color:var(--u-sand-300)}
.voice-card h3{font-family:var(--u-serif);font-size:1.35rem;font-weight:500;margin:0;color:var(--u-ink);letter-spacing:0}
.voice-card p{margin:0;font-size:.95rem;line-height:1.6;color:var(--u-ink-soft)}
.voice-pro{max-width:64ch;margin:1.6rem auto 0;text-align:center;font-size:.95rem;
  line-height:1.65;color:var(--u-ink-soft)}
.voice-pro strong{color:var(--u-ink)}
.voice .note{text-align:center;margin-top:1rem;font-size:.78rem;color:var(--u-ink-soft);opacity:.75}
@media(max-width:900px){
  .voice-grid{grid-template-columns:1fr}
  .voice-mark{height:54px}
  .voice-mark svg{width:46px;height:46px}
}

/* Logos de fabricante sobre la foto de una ficha (Somfy y Lutron en la portada, 18-sep-2026).
   Van en linea con fill=currentColor: blancos sobre el degradado oscuro. Alturas distintas para
   que pesen lo mismo a la vista: Lutron es mucho mas ancho que alto. */
.tile .tile-logos{display:flex;align-items:center;gap:1.1rem;margin-bottom:.7rem;color:#fff;filter:drop-shadow(0 1px 8px rgba(0,0,0,.55))}
.tile .tile-logos .marca{display:block;line-height:0}
.tile .tile-logos svg{display:block;width:auto}
.tile .tile-logos .marca-somfy svg{height:22px}
.tile .tile-logos .marca-lutron svg{height:13px}