/* deshollinadores.com — hoja de estilos */
:root{
  --verde:#2F4A35;
  --verde-oscuro:#1E3124;
  --oro:#E0B34A;
  --crema:#F4E6C4;
  --crema-clara:#FBF4E2;
  --teja:#B5532F;
  --rojo:#9E2B20;
  --tinta:#2B1B10;
  --tinta-suave:#3B2A1E;
  --crema-texto:#EADCB9;
  --display:'Alfa Slab One', Georgia, serif;
  --texto:'Playfair Display', Georgia, 'Times New Roman', serif;
  --lateral:clamp(16px, 4vw, 40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--verde);color:var(--crema);font-family:var(--texto);font-size:18px;line-height:1.6}
svg{max-width:100%}
a{color:inherit}
a:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.seccion-crema a:focus-visible,.prosa a:focus-visible{outline-color:var(--rojo)}

.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--oro);color:var(--tinta);padding:12px 16px;font-weight:700}
.saltar:focus{left:16px;top:16px}

.contenedor{max-width:1200px;margin:0 auto;padding-inline:var(--lateral)}

/* Cabecera y menú */
.cabecera{background:var(--verde)}
.cabecera .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 28px;padding-block:10px}
.marca{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:19px;letter-spacing:.18em;color:var(--oro);text-decoration:none}
.marca svg{width:30px;height:30px;flex:none}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.menu a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;color:var(--crema);text-decoration:none}
.menu a:hover,.menu a[aria-current="page"]{color:var(--oro);text-decoration:underline;text-underline-offset:6px}
.menu .boton{color:var(--tinta);text-decoration:none;min-height:44px;padding:0 20px}
.menu .boton:hover{color:var(--tinta);text-decoration:none}

/* Botones */
.botones{display:flex;flex-wrap:wrap;gap:12px}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:2px solid transparent;font-family:var(--texto);font-weight:700;font-size:18px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
.boton-oro{background:var(--oro);color:var(--tinta)}
.boton-oro:hover{background:#ECC566}
.boton-rojo{background:var(--rojo);color:var(--crema)}
.boton-rojo:hover{background:#B23427}
.boton-borde{border-color:var(--crema);color:var(--crema)}
.boton-borde:hover{background:rgba(244,230,196,.12)}

/* Marco doble dorado */
.marco{border:4px solid var(--oro);padding:8px}
.marco-int{border:1.5px solid var(--oro)}

/* Portada */
.portada{padding:8px clamp(12px, 3vw, 32px) clamp(20px, 3vw, 36px)}
.portada .marco{max-width:1280px;margin:0 auto}
.portada .marco-int{display:flex;flex-wrap:wrap;align-items:flex-end;overflow:hidden}
.portada-texto{flex:1 1 440px;min-width:0;align-self:center;padding:clamp(36px, 6vw, 72px) clamp(20px, 4vw, 56px) clamp(24px, 4vw, 56px);display:flex;flex-direction:column;gap:22px}
.portada-dibujo{flex:1 1 420px;min-width:0}
.portada-dibujo svg{display:block;width:100%;height:auto}

.etiqueta{margin:0;font-weight:700;font-size:15px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.lema{margin:0;display:flex;flex-direction:column;gap:4px}
.lema span{display:block}
.lema .l1,.lema .l2{font-family:var(--display);font-size:clamp(40px, 7vw, 92px);line-height:1.02}
.lema .l2{color:var(--oro)}
.lema .l3{font-style:italic;font-weight:700;font-size:clamp(30px, 4.2vw, 54px);line-height:1.1}
.entradilla{margin:0;max-width:34em;font-size:20px;line-height:1.55;text-wrap:pretty}

/* Cabecera de las páginas interiores */
.cabecera-pagina{padding:8px clamp(12px, 3vw, 32px) clamp(20px, 3vw, 32px)}
.cabecera-pagina .marco{max-width:1280px;margin:0 auto}
.cabecera-pagina .marco-int{padding:clamp(28px, 5vw, 60px) clamp(20px, 4vw, 56px);display:flex;flex-direction:column;gap:18px}
.titulo{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(36px, 6vw, 72px);line-height:1.05;color:var(--crema);text-wrap:balance}
.titulo em{font-style:normal;color:var(--oro)}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:15px;color:var(--crema-texto)}
.migas li+li::before{content:"›";margin-right:10px;color:var(--oro)}
.migas a{color:var(--crema-texto);text-underline-offset:3px}
.migas a:hover{color:var(--oro)}
.fecha{margin:0;font-size:15px;color:var(--crema-texto)}

/* Secciones */
.seccion{padding:clamp(56px, 8vw, 104px) 0}
.seccion-crema{background:var(--crema);color:var(--tinta)}
.seccion-verde{background:var(--verde);color:var(--crema)}
.seccion-crema .etiqueta{color:var(--rojo)}
.encabezado{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;max-width:46em}
.h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(34px, 5vw, 60px);line-height:1.06;text-wrap:balance}
.seccion-crema .h2{color:var(--verde)}
.texto-intro{margin:0;font-size:20px;line-height:1.55}
.seccion-crema .texto-intro{color:var(--tinta-suave)}
.enlace-mas{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;font-weight:700;font-size:19px;color:var(--rojo);text-underline-offset:4px}

/* Tarjetas */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr));gap:20px}
.tarjeta{position:relative;background:var(--crema-clara);border:2px solid var(--verde);padding:28px 26px;display:flex;flex-direction:column;gap:12px;color:var(--tinta)}
.tarjeta:hover{background:#FFF9EA;border-color:var(--teja)}
.tarjeta .num{font-family:var(--display);font-size:40px;line-height:1;color:var(--teja)}
.tarjeta h3{margin:0;font-size:24px;line-height:1.2}
.tarjeta h3 a{text-decoration:none}
.tarjeta h3 a::after{content:"";position:absolute;inset:0}
.tarjeta p{margin:0;font-size:18px;line-height:1.55;color:var(--tinta-suave)}
.tarjeta .mas{margin-top:auto;padding-top:6px;font-weight:700;color:var(--rojo);text-decoration:underline;text-underline-offset:4px}

/* Riesgos */
.puntos{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));gap:32px 40px}
.punto{border-top:3px solid var(--oro);padding-top:20px}
.punto h3{margin:0 0 10px;font-style:italic;font-size:28px;line-height:1.2;color:var(--oro)}
.punto p{margin:0;color:var(--crema-texto)}
.aviso{margin-top:44px;background:var(--crema);color:var(--tinta);padding:26px clamp(20px, 3vw, 32px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.aviso p{margin:0;flex:1 1 420px;min-width:0;font-style:italic;font-weight:700;font-size:clamp(21px, 2.4vw, 28px);line-height:1.3}

/* Provincias */
.provincias{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr));gap:12px}
.provincias a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 18px;border:2px solid var(--verde);background:var(--crema-clara);color:var(--verde);font-weight:700;font-size:20px;text-decoration:none}
.provincias a::after{content:"→";color:var(--teja)}
.provincias a:hover{background:var(--verde);color:var(--crema)}
.provincias a:hover::after{color:var(--oro)}

/* Dos columnas */
.dos-col{display:flex;flex-wrap:wrap;align-items:center;gap:40px 64px}
.col-texto{flex:1 1 460px;min-width:0}
.col-dibujo{flex:1 1 320px;min-width:0;max-width:460px;background:var(--verde)}
.col-dibujo svg{display:block;width:100%;height:auto}

/* Texto largo */
.con-lateral{display:flex;flex-wrap:wrap;align-items:flex-start;gap:48px 64px}
.prosa{flex:999 1 560px;min-width:0;max-width:46em;color:var(--tinta)}
.prosa > :first-child{margin-top:0}
.prosa h2{font-family:var(--display);font-weight:400;font-size:clamp(28px, 3.6vw, 40px);line-height:1.1;color:var(--verde);margin:52px 0 14px}
.prosa h3{font-size:24px;line-height:1.25;margin:32px 0 8px;color:var(--tinta)}
.prosa p,.prosa li{font-size:19px;line-height:1.65;color:var(--tinta-suave)}
.prosa p{margin:0 0 16px}
.prosa ul,.prosa ol{margin:0 0 16px;padding-left:1.3em}
.prosa li{margin:6px 0;padding-left:4px}
.prosa li::marker{color:var(--teja)}
.prosa a{color:var(--rojo);text-underline-offset:3px}
.prosa strong{color:var(--tinta)}
.destacado{background:var(--crema-clara);border:2px solid var(--verde);padding:20px 24px;font-size:20px;margin:0 0 20px}
.nota{background:var(--crema-clara);border:2px solid var(--rojo);padding:20px 24px;margin:0 0 16px}
.nota p:last-child{margin-bottom:0}

.lista-columnas{columns:3 160px;column-gap:32px;margin:0 0 16px;padding:0;list-style:none}
.prosa .lista-columnas li{break-inside:avoid;margin:0;padding:5px 0 5px 22px;position:relative}
.lista-columnas li::before{content:"";position:absolute;left:2px;top:.95em;width:8px;height:8px;background:var(--teja);transform:rotate(45deg)}

.lateral{flex:1 1 300px;min-width:0;background:var(--verde);color:var(--crema);border:4px solid var(--oro);padding:8px}
.lateral .marco-int{padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.lateral h2{margin:0;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1}
.lateral p{margin:0;font-size:17px;line-height:1.5;color:var(--crema-texto)}
.lateral .tel{font-family:var(--display);font-size:28px;line-height:1.2;color:var(--oro);text-decoration:none;overflow-wrap:anywhere}
.lateral .boton{width:100%}

/* Datos de contacto */
.datos{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0 0 24px}
.datos dt{font-weight:700;color:var(--tinta)}
.datos dd{margin:0;color:var(--tinta-suave)}
.datos a{color:var(--rojo)}

/* Llamada final */
.llamada{padding:clamp(48px, 7vw, 88px) clamp(12px, 3vw, 32px);background:var(--verde)}
.llamada .marco{max-width:1000px;margin:0 auto}
.llamada .marco-int{padding:clamp(32px, 5vw, 56px) clamp(16px, 4vw, 48px);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.llamada .h2{color:var(--crema)}
.llamada .texto-intro{max-width:30em}
.llamada .botones{justify-content:center}
.placa{width:100%;background:var(--crema);color:var(--tinta);padding:24px clamp(16px, 3vw, 28px) 28px;display:flex;flex-direction:column;align-items:center;gap:6px}
.placa .zona{font-style:italic;font-weight:700;font-size:clamp(20px, 2.4vw, 28px);line-height:1.3}
.placa .tel{font-family:var(--display);font-size:clamp(34px, 6vw, 72px);line-height:1.15;color:var(--rojo);text-decoration:none;overflow-wrap:anywhere}
.llamada .horario{margin:0;color:var(--crema-texto)}

/* Pie */
.pie{background:var(--verde-oscuro);color:var(--crema-texto);padding:52px 0 32px;font-size:16px;line-height:1.5}
.pie-rejilla{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr));gap:32px}
.pie h2{margin:0 0 12px;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.pie p{margin:0 0 6px}
.pie ul{list-style:none;margin:0;padding:0}
.pie a{display:inline-flex;align-items:center;min-height:40px;color:var(--crema-texto);text-decoration:none}
.pie a:hover{color:var(--oro);text-decoration:underline}
.pie-final{margin-top:36px;padding-top:20px;border-top:1px solid rgba(224,179,74,.3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}

/* Barra de llamada en el móvil */
.barra-movil{display:none}
@media (max-width:720px){
  body{padding-bottom:76px}
  .barra-movil{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--verde-oscuro);border-top:2px solid var(--oro)}
  .barra-movil .boton{min-height:50px;padding:0 10px;font-size:17px}
  .cabecera .contenedor{justify-content:center}
  .menu ul{justify-content:center;gap:0 18px}
  .menu .item-boton{display:none}
  .con-lateral > .lateral{display:none}
  .datos{grid-template-columns:1fr;gap:2px}
  .datos dd{margin-bottom:10px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Texto de presentación */
.presentacion{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr));gap:24px 56px}
.presentacion p{margin:0;font-size:20px;line-height:1.65;color:var(--tinta-suave)}
.presentacion .h2{grid-column:1 / -1}

/* Cinco tarjetas en fila */
.rejilla-3{grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr))}
.rejilla-5{grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr))}

/* Pasos */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));gap:28px 32px;counter-reset:paso}
.pasos li{counter-increment:paso;display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--oro);padding-top:16px}
.pasos li::before{content:counter(paso);font-family:var(--display);font-size:44px;line-height:1;color:var(--oro)}
.pasos h3{margin:0;font-size:24px;line-height:1.2;color:var(--crema)}
.pasos p{margin:0;color:var(--crema-texto)}

/* Banda de precio */
.precio-banda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;border:2px solid var(--verde);background:var(--crema-clara);padding:clamp(24px, 4vw, 40px)}
.precio-cifra{display:flex;flex-direction:column;gap:2px}
.precio-cifra .desde{font-style:italic;font-weight:700;font-size:22px;color:var(--tinta)}
.precio-cifra .euros{font-family:var(--display);font-size:clamp(44px, 7vw, 76px);line-height:1;color:var(--rojo)}
.precio-cifra .que{font-size:17px;color:var(--tinta-suave)}
.precio-factores{flex:1 1 380px;min-width:0;margin:0;padding-left:1.2em;color:var(--tinta-suave);font-size:18px;line-height:1.6}
.precio-factores li::marker{color:var(--teja)}

/* Galería de trabajos */
.galeria{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));gap:20px}
.galeria figure{margin:0;background:var(--crema-clara);border:2px solid var(--verde);padding:8px;display:flex;flex-direction:column;gap:8px}
.galeria img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;background:var(--crema)}
.galeria figcaption{padding:2px 6px 6px;font-size:16px;line-height:1.4;color:var(--tinta-suave)}

/* Preguntas frecuentes */
.faq{display:flex;flex-direction:column;gap:10px;max-width:52em}
.faq details{background:var(--crema-clara);border:2px solid var(--verde);color:var(--tinta)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 20px;cursor:pointer;font-weight:700;font-size:19px;line-height:1.35;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--display);font-size:26px;line-height:1;color:var(--teja)}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.faq .respuesta{padding:0 20px 18px}
.faq .respuesta p{margin:0 0 10px;font-size:18px;line-height:1.6;color:var(--tinta-suave)}
.faq .respuesta p:last-child{margin-bottom:0}
.faq a{color:var(--rojo)}
.prosa .faq{margin:0 0 16px}

.fuentes{margin-top:32px;padding-top:16px;border-top:1px solid rgba(47,74,53,.3)}
.prosa .fuentes p{font-size:16px;color:var(--tinta-suave)}

.precio-portada{margin:0;font-size:18px;line-height:1.5;color:var(--crema-texto)}
.precio-portada strong{color:var(--oro)}

/* Cabeceras con ilustración */
.cabecera-pagina .marco-int.con-dibujo{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:0;padding:0;overflow:hidden}
.cabecera-texto{flex:1 1 440px;min-width:0;padding:clamp(28px, 5vw, 60px) clamp(20px, 4vw, 56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.cabecera-dibujo{flex:1 1 360px;min-width:0;max-width:600px;margin-left:auto;align-self:flex-end}
.cabecera-dibujo img{display:block;width:100%;height:auto}
.tarjeta-img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border:2px solid var(--verde);margin-bottom:4px}

/* Formulario de cita y calculadora */
.calculadora{display:flex;flex-direction:column;gap:20px;background:var(--crema-clara);border:2px solid var(--verde);padding:clamp(20px, 3vw, 32px);margin:0 0 24px}
.calculadora.es-grupo .calc-resultado{border-color:var(--rojo)}
.calc-campos,.form-rejilla{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));gap:16px 24px}
.campo,.campo-num{display:flex;flex-direction:column;gap:6px;min-width:0}
.formulario label{font-weight:700;font-size:17px;color:var(--tinta)}
.calculadora label{font-weight:700;font-size:17px;color:var(--tinta)}
.oblig{font-weight:400;font-size:15px;color:var(--tinta-suave)}
.formulario input,.formulario select,.formulario textarea,.calculadora input{font:inherit;font-size:18px;color:var(--tinta);background:#FFFDF6;border:2px solid var(--verde);min-height:50px;padding:8px 12px;border-radius:0;width:100%;box-sizing:border-box}
.formulario textarea{min-height:96px;resize:vertical}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus,.calculadora input:focus,.num-boton:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.num{display:flex;align-items:stretch}
.num input{text-align:center;font-family:var(--display);font-size:24px;border-left:0;border-right:0;-moz-appearance:textfield}
.num input::-webkit-outer-spin-button,.num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num-boton{flex:none;width:52px;min-height:50px;border:2px solid var(--verde);background:var(--verde);color:var(--crema);font-family:var(--display);font-size:24px;line-height:1;cursor:pointer}
.num-boton:hover{background:#3B5C42}
.calc-resultado{display:flex;flex-direction:column;gap:4px;border:2px solid var(--verde);background:#FFFDF6;padding:16px 20px}
.calc-etiqueta{font-style:italic;font-weight:700;color:var(--tinta-suave)}
.calc-resultado strong{font-family:var(--display);font-weight:400;font-size:clamp(24px, 3.4vw, 34px);line-height:1.15;color:var(--rojo)}
.calc-resultado [data-nota]{font-size:17px;color:var(--tinta-suave)}
.calculadora .boton{align-self:flex-start}
.aviso-form{margin:0;font-weight:700;color:var(--rojo)}
.aviso-form:empty{display:none}
.nota-form{margin:0;font-size:15px;color:var(--tinta-suave)}
.prosa .calculadora p{margin:0}
.prosa .boton{text-decoration:none}
.prosa .boton-oro{color:var(--tinta)}
.prosa .boton-rojo{color:var(--crema)}

/* Tablas y mensajes en artículos */
.tabla{overflow-x:auto;margin:0 0 24px;border:2px solid var(--verde)}
.tabla table{width:100%;min-width:560px;border-collapse:collapse;font-size:17px;background:var(--crema-clara)}
.tabla th,.tabla td{padding:10px 14px;text-align:left;border-bottom:1px solid #D8C9A6;color:var(--tinta)}
.tabla thead th{background:var(--verde);color:var(--crema);font-weight:700}
.tabla tbody th{font-weight:700}
.mensaje{margin:0 0 20px;padding:18px 22px;background:#E4F1DC;border:2px solid #6E9A62;border-radius:14px 14px 14px 0;font-size:18px;line-height:1.55;color:var(--tinta)}

/* Mapa de zonas */
.mapa-zonas{max-width:760px;margin:56px auto 0}
.mapa-zonas .marco-int{background:var(--verde);padding:clamp(6px, 2.5vw, 22px)}
.mapa-svg{display:block;width:100%;height:auto}
.mapa-etiquetas text{font-family:var(--display);font-size:46px;fill:var(--oro);paint-order:stroke;stroke:var(--verde);stroke-width:12px;stroke-linejoin:round}
.mapa-etiquetas a:hover text,.mapa-etiquetas a:focus text{fill:var(--crema)}
.mapa-etiquetas a:focus{outline:none}
.mapa-etiquetas a:focus-visible text{text-decoration:underline}
.mapa-zonas figcaption{text-align:center;font-size:16px;line-height:1.5;margin-top:14px;color:var(--tinta-suave)}

/* Móviles estrechos (320-380 px): que la marca no empuje la página hacia los lados */
@media (max-width:380px){
  .marca{font-size:16px;letter-spacing:.1em;gap:8px}
  .marca svg{width:26px;height:26px}
}