:root{
  --tinta:#2b1a10; --texto:#4a3426; --suave:#6f5847;
  --teja:#b3321d; --teja-oscuro:#8d2514;
  --oliva:#2f5d3a; --oliva-oscuro:#244a2d; --mostaza:#e8a51f;
  --crema:#fbeedd; --hueso:#fff8ee;
  --cartel:'Alfa Slab One',Georgia,serif;
  --mano:'Work Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* las piezas giradas asoman por el costado; el recorte va aquí y no en cada
   sección, para que ninguna se olvide y salga scroll lateral en el móvil */
html,body{overflow-x:hidden}
body{margin:0; background:var(--crema); color:var(--texto); font:17px/1.65 var(--mano)}
h1,h2,h3{color:var(--tinta); font-family:var(--cartel); font-weight:400; line-height:1.1; margin:0}
a{color:var(--teja-oscuro)}
.ew-env{max-width:1040px; margin:0 auto; padding:0 20px}

/* barra de estilos: pastillas gordas, como las chapas de un llavero */
.ew-barra{background:var(--tinta); color:var(--crema); font-size:13px; padding:10px 0}
.ew-barra .ew-env{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ew-tit{color:var(--mostaza); letter-spacing:2px; text-transform:uppercase; font-size:11px; font-weight:800}
.ew-barra nav{display:flex; gap:6px; flex-wrap:wrap; flex:1}
.ew-barra nav a{display:flex; align-items:baseline; gap:7px; color:var(--crema); text-decoration:none;
  padding:5px 13px; border-radius:999px; border:2px solid #ffffff33}
.ew-barra nav a b{font-family:var(--cartel); font-weight:400}
.ew-barra nav a span{font-size:12px; opacity:.8}
.ew-barra nav a:hover{background:#ffffff1f; border-color:var(--mostaza)}
.ew-barra nav a.on{background:var(--mostaza); color:var(--tinta); border-color:var(--tinta)}
.ew-guia{color:var(--mostaza); text-decoration:none; font-size:13px; font-weight:600}
.ew-guia:hover{text-decoration:underline}

/* cintas: las dos piezas decorativas de todo el estilo, dibujadas con gradientes */
.cinta{height:16px; border-top:3px solid var(--tinta); border-bottom:3px solid var(--tinta);
  background:repeating-linear-gradient(135deg,var(--teja) 0 22px,var(--crema) 22px 44px)}
.ondas{height:18px; background:radial-gradient(circle at 18px 18px,transparent 16px,var(--mostaza) 17px) 0 0/36px 18px repeat-x}

/* cabecera: no se queda pegada arriba a propósito. Un cartel de chapa no
   persigue al cliente por la calle. */
.cab{background:var(--hueso); border-bottom:3px solid var(--tinta); padding:20px 0}
.cab .ew-env{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.marca{display:inline-block; text-decoration:none; background:var(--mostaza); color:var(--tinta);
  border:3px solid var(--tinta); border-radius:14px; padding:10px 18px;
  box-shadow:5px 5px 0 var(--tinta); transform:rotate(-1.4deg)}
.marca b{display:block; font-family:var(--cartel); font-weight:400; font-size:22px; line-height:1.1}
.marca small{display:block; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-top:2px}
.cab nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.cab nav a:not(.tel){color:var(--tinta); text-decoration:none; font-weight:700; font-size:15.5px;
  border-bottom:3px solid var(--mostaza); padding-bottom:2px}
.cab nav a:not(.tel):hover{border-bottom-color:var(--teja)}

/* botón gordo: el único elemento que se hunde al pulsarlo, porque es el que
   queremos que se pulse */
.tel{display:inline-block; background:var(--teja); color:#fff!important; text-decoration:none;
  font-weight:800; font-size:16px; padding:13px 24px; border:3px solid var(--tinta); border-radius:999px;
  box-shadow:4px 4px 0 var(--tinta); white-space:nowrap}
.tel:hover{background:var(--teja-oscuro)}
.tel:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--tinta)}
.btn2{display:inline-block; background:var(--hueso); color:var(--tinta); text-decoration:none;
  font-weight:800; font-size:16px; padding:13px 24px; border:3px solid var(--tinta); border-radius:999px;
  box-shadow:4px 4px 0 var(--tinta)}
.btn2:hover{background:var(--mostaza)}
.btn2:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--tinta)}

/* la pegatina del escaparate: horario, dirección y año antes de nada */
.chapa{background:var(--mostaza); color:var(--tinta); padding:16px 0 18px}
.chapa .ew-env{display:flex; gap:10px 34px; flex-wrap:wrap}
.chapa div{min-width:150px}
.chapa b{display:block; font-size:11.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; opacity:.78}
.chapa span{font-size:16.5px; font-weight:600}

.heroe{padding:56px 0 64px}
.heroe h1{font-size:clamp(32px,6.4vw,58px); max-width:15ch; margin-bottom:26px}
/* la entradilla va dentro de un cartón, no suelta sobre el fondo: así el hero
   tiene dos planos y no una sola mancha de texto */
.carton{background:var(--hueso); border:3px solid var(--tinta); border-radius:16px; padding:26px 26px 28px;
  box-shadow:9px 9px 0 var(--oliva); max-width:620px; transform:rotate(-.7deg)}
.carton p{margin:0 0 22px; font-size:18px}
.acc{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

.rot{display:inline-block; font-size:12px; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--oliva); font-weight:800; margin:0 0 12px}
section{padding:60px 0}
section h2{font-size:clamp(26px,4.2vw,38px); margin-bottom:16px; max-width:20ch}
section .intro{font-size:18px; max-width:58ch; margin:0 0 36px}
.franja-hueso{background:var(--hueso)}
.franja-oliva{background:var(--oliva); color:#f2ece0}
.franja-oliva h2,.franja-oliva h3{color:#fff}
.franja-oliva .rot{color:var(--mostaza)}

/* servicios: lista de mostrador. Bandas anchas numeradas en vez de seis
   tarjetas iguales, porque leídas en fila se comparan y así se recorren. */
.mostrador{list-style:none; margin:0; padding:0; border:3px solid var(--tinta); border-radius:18px; overflow:hidden}
.serv{display:flex; gap:20px; align-items:flex-start; padding:22px 24px; background:var(--hueso)}
.serv + .serv{border-top:3px solid var(--tinta)}
.serv:nth-child(even){background:var(--crema)}
.num{flex:0 0 auto; width:54px; height:54px; border-radius:999px; background:var(--teja); color:#fff;
  border:3px solid var(--tinta); display:flex; align-items:center; justify-content:center;
  font-family:var(--cartel); font-size:20px; transform:rotate(-5deg)}
.serv:nth-child(even) .num{background:var(--oliva); transform:rotate(5deg)}
.serv h3{font-size:20px; margin-bottom:6px}
.serv p{margin:0; font-size:16px; max-width:62ch}

/* motivos: tres cartones escalonados y girados. El desnivel es lo que impide
   que parezcan tres celdas de una tabla. */
.motivos{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:start}
.motivo{background:var(--crema); color:var(--texto); border:3px solid var(--tinta); border-radius:16px;
  padding:22px; box-shadow:6px 6px 0 var(--tinta)}
.motivo:nth-child(1){transform:rotate(-1.3deg)}
.motivo:nth-child(2){transform:translateY(16px) rotate(1deg)}
.motivo:nth-child(3){transform:rotate(1.6deg)}
.motivo h3{color:var(--tinta); font-size:19px; margin-bottom:8px}
.motivo p{margin:0; font-size:16px}

/* preguntas abiertas en dos columnas: nada que desplegar */
.preg{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin:0}
.preg-item{border:3px solid var(--tinta); border-radius:16px; overflow:hidden; background:var(--hueso)}
.preg dt{background:var(--oliva); color:#fff; font-family:var(--cartel); font-weight:400;
  font-size:17.5px; line-height:1.25; padding:14px 18px}
.preg dd{margin:0; padding:16px 18px 18px; font-size:16px}

/* dónde estamos: una placa centrada con el teléfono enorme, en vez de dos
   columnas de filas. Es el dato que queremos que se marque. */
.placa{background:var(--hueso); border:3px solid var(--tinta); border-radius:20px; padding:30px 24px;
  box-shadow:10px 10px 0 var(--mostaza); text-align:center; max-width:640px; margin:0 auto}
.placa .donde{font-family:var(--cartel); font-size:clamp(20px,3.4vw,28px); color:var(--tinta); line-height:1.2}
.placa .tfno{display:inline-block; margin:16px 0 6px; font-family:var(--cartel);
  font-size:clamp(28px,7vw,46px); color:var(--teja-oscuro); text-decoration:none; letter-spacing:-.5px}
.placa .tfno:hover{color:var(--teja)}
.placa .horas{font-size:16.5px; font-weight:600; color:var(--texto); border-top:3px dashed var(--tinta);
  margin-top:18px; padding-top:16px}
.aviso{margin:34px auto 0; max-width:640px; text-align:center}
.aviso h3{font-size:19px; margin-bottom:8px}
.aviso p{margin:0 0 20px; font-size:16.5px}
.aviso .acc{justify-content:center}

.pie{background:var(--tinta); color:#e6d8c6; padding:32px 0; font-size:14.5px}
.pie .ew-env{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.pie b{color:var(--mostaza); font-family:var(--cartel); font-weight:400}

/* la guía, con la misma ropa que el resto */
.g-guia{background:var(--crema); border-top:3px solid var(--tinta); padding:62px 0}
.g-rot{display:inline-block; font-size:12px; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--oliva); font-weight:800; margin:0 0 12px}
.g-h{font-size:clamp(28px,4.4vw,40px); margin-bottom:10px}
.g-lema{font-size:19px; max-width:54ch; margin:0 0 38px}
.g-bloque{margin-bottom:34px; background:var(--hueso); border:3px solid var(--tinta); border-radius:18px;
  padding:24px; box-shadow:6px 6px 0 var(--tinta)}
.g-bloque h3{font-size:21px; margin-bottom:16px}
.g-bloque > p{margin:0; max-width:64ch; font-size:16.5px}
.g-colores{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g-color{background:var(--crema); border:3px solid var(--tinta); border-radius:14px; padding:14px}
.g-tono{display:block; height:52px; border-radius:10px; margin-bottom:12px; border:3px solid var(--tinta)}
.g-color b{display:block; color:var(--tinta); font-size:15.5px; font-weight:800}
.g-color code{display:block; font-size:12.8px; color:var(--suave); margin:3px 0 7px}
.g-color small{font-size:13.6px; line-height:1.5; display:block}
.g-tipos{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g-tipo{background:var(--crema); border-left:6px solid var(--mostaza); border-radius:0 12px 12px 0; padding:12px 14px}
.g-tipo b{display:block; color:var(--tinta); font-family:var(--cartel); font-weight:400; font-size:18px; margin-bottom:5px}
.g-tipo p{margin:0; font-size:15.5px}
.g-lista{margin:0; padding-left:22px; max-width:70ch}
.g-lista li{margin-bottom:10px; font-size:16.5px}
.g-lista li::marker{color:var(--oliva); font-weight:800}
.g-no li::marker{color:var(--teja)}

@media (max-width:760px){
  body{font-size:16.5px}
  .cab nav a.oculta{display:none}
  .cab .ew-env{gap:14px}
  .heroe{padding:40px 0 46px}
  section,.g-guia{padding:44px 0}
  /* en pantalla estrecha los giros grandes se comen el margen: se quitan los
     de los bloques anchos y se dejan solo los de las piezas pequeñas */
  .carton,.motivo:nth-child(1),.motivo:nth-child(2),.motivo:nth-child(3){transform:none}
  .carton{box-shadow:6px 6px 0 var(--oliva)}
  .motivos{gap:20px}
  .serv{gap:14px; padding:18px 16px}
  .num{width:46px; height:46px; font-size:17px}
  .placa{box-shadow:6px 6px 0 var(--mostaza); padding:24px 18px}
  .tel,.btn2{font-size:15.5px; padding:12px 20px}
}
@media (prefers-reduced-motion:reduce){
  .tel:active,.btn2:active{transform:none}
}