/* Reciclatges Ontinyent · propuesta de web (español).
   Esta es la PLANTILLA: construir.py la copia a web/css/estilos.css cambiando las marcas de versión de las URL por ?v=<huella> (el servidor guarda CSS, fuentes e imágenes mucho tiempo).
   Colores medidos en el logotipo que pegó Alfred el 11/11/2026 (píxeles opacos): azul del aro #0176BC (mediana de sus azules saturados), cian de los reflejos #01B6FC y azul marino
   de las letras y las sombras #00205B. Blanco sobre #0176BC da 4,9:1 (vale para texto de botones); para texto y enlaces sobre blanco o sobre el velo azul se usa el mismo azul
   oscurecido, #01689F (6,0:1). El cian solo va en detalles sobre fondo oscuro. El texto es azul noche #000830, de su web actual.
   Tipografías autoalojadas (SIL OFL 1.1): Familjen Grotesk (titulares), Wix Madefor Text (texto) y Saira Stencil One (marcas pintadas en los fardos).
   Los enlaces no llevan nunca subrayado: se distinguen por el color y el peso. Sin estilos en línea (el servidor los ignora). */
@font-face { font-family: 'Familjen Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/familjen-500.woff2?v=78de8b6f') format('woff2'); }
@font-face { font-family: 'Familjen Grotesk'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/familjen-600.woff2?v=e8038d0f') format('woff2'); }
@font-face { font-family: 'Familjen Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/familjen-700.woff2?v=0cf9a85f') format('woff2'); }
@font-face { font-family: 'Wix Madefor Text'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/wixmadefor-400.woff2?v=f7e50c51') format('woff2'); }
@font-face { font-family: 'Wix Madefor Text'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/wixmadefor-500.woff2?v=b6c61feb') format('woff2'); }
@font-face { font-family: 'Wix Madefor Text'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/wixmadefor-700.woff2?v=04ca6dd7') format('woff2'); }
@font-face { font-family: 'Saira Stencil One'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/sairastencil-400.woff2?v=659930e5') format('woff2'); }

:root {
  --azul: #0176BC; --azul-osc: #01689F; --cian: #01B6FC; --marino: #00205B; --noche: #000830;
  --suave: #EFF3FA; --linea: #C5D0E6; --texto-suave: #35405F;
  --titulo: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --cuerpo: 'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --st: 'Saira Stencil One', Impact, 'Arial Narrow', sans-serif;
  --g: clamp(16px, 4vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--cuerpo); color: var(--noche); background: #fff; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.06; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.8rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1em; max-width: 68ch; }
.lead { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); line-height: 1.55; color: var(--texto-suave); max-width: 58ch; }
a { color: var(--azul-osc); font-weight: 700; text-decoration: none; }
a:hover, a:focus { text-decoration: none; color: var(--noche); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--azul-osc); outline-offset: 3px; }
.nav a:focus-visible, .pie a:focus-visible, .cta a:focus-visible, .barra-llamada a:focus-visible { outline-color: #fff; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--noche); color: #fff; padding: .7rem 1rem; }
.saltar:focus { top: 8px; color: #fff; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenedor { width: 100%; max-width: calc(1180px + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }
.marca-st { font: 400 .95rem/1.2 var(--st); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-osc); margin: 0 0 .9rem; }

/* tejido en sarga: finas rayas a 135° (como la trama de una tela), solo de fondo */
.sarga { background-color: #fff; background-image: repeating-linear-gradient(135deg, rgba(1, 118, 188, .08) 0 1px, transparent 1px 6px); }
.sarga--oscura { background-color: var(--marino); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 6px); color: #fff; }

/* ---------- cabecera ---------- */
.cabecera { position: relative; background: #fff; border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 10px; }
.marca { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; color: var(--noche); }
.marca:hover { color: var(--noche); }
.marca__logo { display: block; flex: none; height: 92px; width: auto; }
.marca__texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.marca__texto small { font: 600 .8rem/1.15 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.cabecera__tel { display: flex; flex-direction: column; margin-left: auto; text-align: right; line-height: 1.1; color: var(--noche); }
.cabecera__tel:hover { color: var(--noche); }
.cabecera__tel-etq { font: 500 .72rem/1 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.cabecera__tel-num { margin-top: .25rem; font: 700 1.6rem/1 var(--titulo); color: var(--azul-osc); white-space: nowrap; }
.boton-menu { display: none; min-height: 3rem; padding: .4rem 1.1rem; border: 2px solid var(--noche); background: transparent; color: var(--noche); font: 700 1.05rem var(--titulo); cursor: pointer; }
.nav { background: var(--marino); }
.menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.menu a { display: inline-flex; align-items: center; min-height: 3rem; padding: .3rem 1.35rem; color: #fff; font: 600 1.02rem/1 var(--titulo); letter-spacing: .01em; }
.menu a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.menu a[aria-current="page"] { background: var(--azul); color: #fff; }

/* ---------- botones y marcas ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: .55rem 1.5rem; background: var(--azul); color: #fff; border: 2px solid var(--azul); font: 700 1.05rem/1.1 var(--titulo); letter-spacing: .005em; text-align: center; cursor: pointer; }
.boton:hover, .boton:focus-visible { background: var(--noche); border-color: var(--noche); color: #fff; }
.boton--borde { background: transparent; color: var(--noche); border-color: var(--noche); }
.boton--borde:hover, .boton--borde:focus-visible { background: var(--noche); color: #fff; }
.boton--claro { background: #fff; border-color: #fff; color: var(--noche); }
.boton--claro:hover, .boton--claro:focus-visible { background: var(--cian); border-color: var(--cian); color: var(--noche); }
.boton--borde.boton--claro { background: transparent; color: #fff; border-color: #fff; }
.boton--borde.boton--claro:hover, .boton--borde.boton--claro:focus-visible { background: #fff; color: var(--noche); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0 0; }
.marcas { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.marcas li { border: 2px solid var(--noche); padding: .3rem .8rem; font: 600 .98rem/1.1 var(--titulo); letter-spacing: .02em; text-transform: uppercase; }
.marcas--chicas li { font-size: .88rem; }

/* ---------- portada ---------- */
.hero { padding-block: clamp(2rem, 5vw, 4.5rem); }
.hero__fila { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero__texto h1 { margin-bottom: .45em; }
.pila { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 545; }
.pila .foto { position: absolute; width: 70%; margin: 0; }
.pila .foto img { display: block; width: 100%; height: auto; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--linea); }
.pila__a { top: 0; left: 0; z-index: 1; }
.pila__b { top: 25.7%; right: 0; z-index: 2; }
.pila__c { top: 51.4%; left: 0; z-index: 3; }
.fleje { position: relative; height: 12px; background: var(--azul); box-shadow: inset 0 -3px 0 rgba(0, 32, 91, .3); }
.fleje::before { content: ""; position: absolute; left: clamp(16px, 8vw, 120px); top: -7px; width: 62px; height: 26px; background: var(--noche); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--noche); }

/* ---------- secciones ---------- */
.seccion { padding-block: clamp(2.5rem, 6vw, 5rem); }
.seccion--suave { background: var(--suave); }
.seccion__pie { margin: 2rem 0 0; max-width: none; }
.seccion__pie .acciones { margin: 0; }
.encabezado { margin-bottom: 2rem; }
.encabezado h2 { margin-bottom: .35em; }
.encabezado .lead { margin: 0; }
.portada-pagina { padding-block: clamp(2.2rem, 5vw, 4rem); border-bottom: 1px solid var(--linea); }
.portada-pagina h1 { margin-bottom: .35em; }
.portada-pagina .lead { margin: 0; }
.portada-pagina--logo .portada-pagina__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.portada-pagina__logo img { display: block; height: 230px; width: auto; max-width: 100%; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.dos-col--texto { align-items: start; }

/* fotos: a su tamaño como mucho (437 px), con el fleje azul de los fardos */
.foto { position: relative; margin: 0; max-width: 437px; }
.foto img { display: block; width: 100%; height: auto; }
.fardo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 26%; width: 14px; background: linear-gradient(90deg, var(--azul), var(--cian) 55%, var(--azul)); box-shadow: 0 0 0 1px rgba(0, 8, 48, .22); }
.dos-fotos, .tres-fotos { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.dos-fotos .foto { flex: 0 1 437px; }
.tres-fotos .foto { flex: 0 1 calc((100% - 40px) / 3); }

/* ---------- pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.paso { position: relative; padding-top: 1rem; border-top: 8px solid var(--azul); }
.paso::after { content: ""; position: absolute; top: -8px; right: -26px; width: 0; height: 0; border-left: 14px solid var(--azul); border-top: 12px solid transparent; border-bottom: 12px solid transparent; transform: translateY(-8px); }
.paso:last-child::after { display: none; }
.paso__num { margin: 0 0 .3rem; font-size: 2.3rem; color: var(--azul); letter-spacing: .06em; }
.paso h3 { margin-bottom: .3rem; }
.paso p:last-child { margin-bottom: 0; }

/* ---------- tarjetas (etiquetas de fardo) ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.tarjeta { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--noche); }
.tarjeta .foto { max-width: none; }
.tarjeta__cuerpo { position: relative; flex: 1; padding: 1.5rem 1.2rem 1.3rem; border-top: 8px solid var(--azul); }
.tarjeta__cuerpo::before { content: ""; position: absolute; top: .65rem; right: 1rem; width: 14px; height: 14px; border: 2px solid var(--noche); border-radius: 50%; }
.tarjeta__cod { margin: 0 0 .35rem; font-size: .9rem; }
.tarjeta h3, .tarjeta h2 { margin-bottom: .3rem; }
.tarjeta__cuerpo p:last-child { margin-bottom: 0; font-size: .98rem; color: var(--texto-suave); }

/* ---------- valores ---------- */
.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.valor { padding: 1.3rem 1.2rem; background: #fff; border: 2px solid var(--noche); border-top: 8px solid var(--azul); }
.valor .marca-st { margin-bottom: .35rem; font-size: .9rem; }
.valor h3 { margin-bottom: .3rem; }
.valor p:last-child { margin: 0; color: var(--texto-suave); }

/* ---------- banda de llamada ---------- */
.cta { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.cta__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.cta h2 { color: #fff; margin-bottom: .25em; }
.cta p { margin: 0; color: #DCE4F7; max-width: 52ch; }
.cta__acciones { margin: 0; }

/* ---------- contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.fichas { margin: 0 0 1.6rem; }
.fichas > div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--linea); }
.fichas > div:last-child { border-bottom: 1px solid var(--linea); }
.fichas dt { font: 500 .8rem/1.5 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); padding-top: .25rem; }
.fichas dd { margin: 0; }
.tel-grande { font: 700 1.9rem/1.1 var(--titulo); letter-spacing: -.01em; }
.correo { overflow-wrap: anywhere; }
.fichas--legal > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.formulario .campo { margin-bottom: 1rem; }
.formulario label { display: block; margin-bottom: .3rem; font-weight: 700; font-size: .95rem; }
.formulario input, .formulario textarea { display: block; width: 100%; padding: .7rem .8rem; border: 2px solid var(--noche); border-radius: 0; background: #fff; color: var(--noche); font: 400 1rem/1.4 var(--cuerpo); }
.formulario textarea { resize: vertical; min-height: 9rem; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.nota-form { font-size: .88rem; color: var(--texto-suave); max-width: none; }
.completo { margin: 1rem 0 0; }
.estado { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--suave); border-left: 6px solid var(--azul); max-width: none; }

/* ---------- plano ---------- */
.plano-caja { position: relative; background: #E8EEF8; border: 2px solid var(--noche); overflow: hidden; }
.plano { display: block; width: 100%; height: auto; }
.plano__calle { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.plano__calle--principal { stroke-width: 15; }
.plano__poligono { fill: rgba(1, 118, 188, .14); }
.plano__zona { font: 700 24px var(--titulo); letter-spacing: .02em; fill: var(--azul-osc); }
.plano__rotulo { font: 500 26px var(--cuerpo); fill: var(--texto-suave); paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
.plano__etiqueta { fill: var(--marino); }
.plano__nombre { font: 700 34px var(--titulo); fill: #fff; letter-spacing: .01em; }
.plano__dato { font: 500 24px var(--cuerpo); fill: #DCE4F7; }
.plano__pin { fill: #fff; stroke: var(--azul-osc); stroke-width: 6; }
.plano__pin-centro { fill: var(--azul-osc); }
.plano__guia { stroke: var(--noche); stroke-width: 3; }
.plano__escala path { stroke: var(--texto-suave); stroke-width: 4; fill: none; }
.plano__escala text { font: 500 24px var(--cuerpo); fill: var(--texto-suave); }
.plano__agua { fill: none; stroke: #BCD2EC; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.plano__enlace { position: absolute; inset: 0; z-index: 1; }
.plano-credito { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; margin: 0; max-width: none; font-size: .75rem; line-height: 1.3; background: rgba(255, 255, 255, .92); }
.plano-credito a { display: block; min-height: 1.75rem; padding: .35rem .6rem; font-weight: 700; }
.plano-acciones { margin: 1.1rem 0 0; max-width: none; text-align: center; }

/* ---------- textos legales ---------- */
.legal .contenedor { max-width: calc(860px + 2 * var(--g)); }
.legal h2 { margin-top: 2rem; font-size: 1.7rem; }
.legal h2.oculto { margin: 0; }

/* ---------- pie ---------- */
.pie { padding-block: clamp(2.2rem, 5vw, 3.4rem) 1.2rem; }
.pie__columnas { display: grid; grid-template-columns: 1.3fr 1fr .8fr .8fr; gap: 2rem 2.5rem; }
.pie h2 { margin: 0 0 .8rem; font: 500 .8rem/1.2 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: #7FD3FB; }
.pie p { margin: 0 0 .9rem; color: #DCE4F7; font-size: .98rem; }
.pie a { color: #fff; }
.pie a:hover { color: #7FD3FB; }
.pie .pie__nombre { display: flex; align-items: center; margin: 0 0 1rem; }
.pie__placa { display: inline-flex; flex: none; background: #fff; padding: 8px 14px; }
.pie__placa img { display: block; height: 104px; width: auto; }
.pie__tel { font: 700 1.4rem/1.2 var(--titulo); }
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: .35rem; }
.pie__lista a { display: inline-block; padding-block: .2rem; font-weight: 500; }
.pie__base { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.pie__base p { margin: 0; font-size: .85rem; color: #B9C6E8; }
.barra-llamada { display: none; }

/* ---------- pantallas medianas ---------- */
@media (max-width: 1060px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; }
  .paso:nth-child(2)::after { display: none; }
  .pie__columnas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 959.98px) {
  .cabecera__tel { display: none; }
  .boton-menu { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; }
  .marca { flex: 1 1 0; }
  .nav { display: none; }
  .nav.abierto { display: block; }
  .menu { flex-direction: column; }
  .menu li { border-top: 1px solid rgba(255, 255, 255, .18); }
  .menu li:first-child { border-top: 0; }
  .menu a { width: 100%; min-height: 3.3rem; font-size: 1.15rem; }
  .hero__fila, .dos-col, .contacto { grid-template-columns: minmax(0, 1fr); }
  .pila { max-width: 520px; }
  .valores { grid-template-columns: minmax(0, 1fr); }
  .portada-pagina--logo .portada-pagina__fila { grid-template-columns: minmax(0, 1fr); }
  .portada-pagina__logo img { height: 170px; }
}
@media (max-width: 760px) {
  body { padding-bottom: 80px; }
  .barra-llamada { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--marino); border-top: 2px solid var(--cian); }
  .barra-llamada .boton { width: 100%; min-height: 3.2rem; font-size: 1.15rem; border-color: #fff; }
  .fichas--legal > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
  .acciones .boton, .plano-acciones .boton, .completo .boton { width: 100%; }
  .cta__acciones { width: 100%; }
  .marca__texto { display: none; }
  .marca__logo { height: 64px; }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .paso::after { display: none; }
  .tres-fotos .foto, .dos-fotos .foto { flex: 1 1 100%; max-width: none; }
  .foto { max-width: none; }
  .campos-2 { grid-template-columns: minmax(0, 1fr); }
  .pie__columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) { .boton, .menu a { transition: background-color .15s, color .15s; } }