/* Tema «Eco» · ladrar.es
   Cartel tipográfico: un perro que ladra (formas planas), las ondas del ladrido y el nombre que retumba en ecos.
   Hueso, negro y naranja señal. Syne (titulares) y Karla (texto). */

:root {
  --hueso: #efe8dc;
  --hueso-2: #e4dccd;
  --negro: #141210;
  --negro-2: #2a2622;
  --naranja: #ff5a1f;
  --naranja-osc: #c43d0c;
  --tenue: #625b51;

  --ancho-texto: 42rem;
  --ancho-amplio: 78rem;
  --radio: 0;
  --color-texto: var(--negro);
  --color-fondo: var(--hueso);
  --color-suave: var(--hueso-2);
  --color-borde: #cfc6b6;
  --color-acento: var(--naranja-osc);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulos: "Syne", "Arial Black", system-ui, sans-serif;

  --t-0: .875rem;
  --t-1: 1rem;
  --t-2: 1.1875rem;
  --t-3: 1.5rem;
  --t-4: clamp(1.75rem, 3.5vw, 2.5rem);
  --t-5: clamp(2.75rem, 7vw, 5.5rem);
  --t-6: clamp(4rem, 23vw, 13rem);
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --transicion: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--negro) var(--hueso-2); accent-color: var(--naranja-osc); }
body { display: flex; flex-direction: column; min-height: min(100vh, 75rem); margin: 0; background: var(--hueso); color: var(--negro); font: 400 1.0625rem/1.6 var(--fuente-texto); }
::selection { background: var(--naranja); color: var(--negro); }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; transition: color var(--transicion), background-color var(--transicion), border-color var(--transicion); }
:focus-visible { outline: 3px solid var(--naranja-osc); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--fuente-titulos); text-wrap: balance; }
p { text-wrap: pretty; }
main { flex: 1 0 auto; }
main:focus { outline: none; }

.envoltorio { width: min(100% - 2 * var(--margen), var(--ancho-amplio)); margin-inline: auto; }
.saltar { position: absolute; left: var(--e-4); top: -10rem; z-index: 50; background: var(--negro); color: var(--hueso); padding: var(--e-3) var(--e-4); font-weight: 700; }
.saltar:focus { top: var(--e-4); }

/* ---------- cabecera */
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 4.75rem; }
.marca { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; text-decoration: none; }
.marca-simbolo { width: 2rem; height: 2rem; color: var(--naranja-osc); }
.marca-nombre { font: 700 1.5rem/1 var(--fuente-titulos); letter-spacing: -.03em; }
.navegacion ul { display: flex; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.navegacion a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--e-5); border-radius: 999px; background: var(--negro); color: var(--hueso); font-weight: 700; text-decoration: none; }
.navegacion a:hover { background: var(--naranja); color: var(--negro); }

/* ---------- portada */
.portada { position: relative; overflow: hidden; padding-block: var(--e-6) var(--e-8); }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-5); align-items: center; }
.perro { display: block; width: 100%; height: auto; }
.portada-perro { max-width: 34rem; }
.titular { position: relative; isolation: isolate; }
.titular h1, .titular .numero { position: relative; z-index: 2; margin: 0; font: 700 var(--t-6)/.82 var(--fuente-titulos); letter-spacing: -.06em; color: var(--negro); }
.eco { position: absolute; inset: 0; z-index: 1; margin: 0; font: 700 var(--t-6)/.82 var(--fuente-titulos); letter-spacing: -.06em; white-space: nowrap; pointer-events: none; }
.eco span { position: absolute; left: 0; top: 0; color: transparent; -webkit-text-stroke: 2px var(--negro); }
.eco span:nth-child(1) { transform: translateX(.09em); opacity: .55; -webkit-text-stroke-color: var(--naranja-osc); }
.eco span:nth-child(2) { transform: translateX(.19em); opacity: .32; }
.eco span:nth-child(3) { transform: translateX(.3em); opacity: .16; }
/* el nombre se ajusta al ancho de su columna: entre 900 y 1300 px la columna es más estrecha que el titular a 13rem */
.portada-texto { container-type: inline-size; }
.portada .titular h1, .portada .eco { font-size: min(13rem, 23vw, 28cqi); }
.portada-lema { display: inline-flex; align-items: center; gap: var(--e-3); margin: var(--e-6) 0 0; padding: .55rem 1.1rem .6rem; border: 2px solid var(--negro); border-radius: 999px; font: 700 var(--t-3)/1 var(--fuente-titulos); letter-spacing: -.01em; }
.portada-lema::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--naranja); }

/* ---------- franja con el lema */
.franja { overflow: hidden; background: var(--naranja); color: var(--negro); border-block: 3px solid var(--negro); }
.franja-pista { display: flex; width: max-content; }
.franja-pista p { display: flex; align-items: center; gap: var(--e-6); margin: 0; padding: var(--e-5) var(--e-3); font: 800 clamp(2rem, 5vw, 3.75rem)/1 var(--fuente-titulos); letter-spacing: -.03em; white-space: nowrap; }
.franja-pista p > * + * { margin-left: 0; }
.franja-simbolo { width: 1em; height: 1em; flex: none; color: var(--negro); }
@media (prefers-reduced-motion: no-preference) {
  .franja-pista { animation: franja 28s linear infinite; }
}
@keyframes franja { to { transform: translateX(-50%); } }

/* ---------- contacto */
.contacto { background: var(--negro); color: var(--hueso); padding-block: var(--e-9); }
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: start; }
.contacto-cabecera h2 { margin: 0 0 var(--e-6); font-size: var(--t-5); font-weight: 700; line-height: .95; letter-spacing: -.045em; color: var(--naranja); }
.perro-contacto { max-width: 15rem; }
.perro-contacto .p-cuerpo { fill: var(--hueso); }
.perro-contacto .p-ojo { fill: var(--negro); }
.perro-contacto .p-pupila { fill: var(--hueso); }
.perro-contacto .p-chapa { fill: var(--negro); stroke: var(--hueso); }
.contacto :focus-visible { outline-color: var(--naranja); }

/* formulario del motor */
.x-contacto { max-width: none; gap: var(--e-5); scroll-margin-top: 9rem; }
.x-contacto label { font-weight: 700; font-size: var(--t-1); }
.x-contacto label span { color: #b9b0a2; font-weight: 400; }
.x-contacto input:not([type=checkbox]), .x-contacto textarea {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 2px solid var(--hueso); border-radius: 14px; background: var(--negro-2); color: var(--hueso);
  font: 400 1.0625rem/1.4 var(--fuente-texto); transition: border-color var(--transicion), background-color var(--transicion);
}
.x-contacto textarea { min-height: 9rem; resize: vertical; }
.x-contacto input:focus, .x-contacto textarea:focus { outline: none; border-color: var(--naranja); background: #34302b; }
.x-contacto .x-acepto label { font-weight: 400; line-height: 1.5; }
.x-contacto .x-acepto input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--naranja); }
.x-contacto .x-acepto a { color: var(--naranja); font-weight: 700; }
.boton, .x-contacto .boton, .x-buscador button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 3.25rem; padding: .8rem 1.75rem; border: 0; border-radius: 999px;
  background: var(--naranja); color: var(--negro); font: 700 var(--t-2)/1.1 var(--fuente-titulos); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: transform var(--transicion), background-color var(--transicion), box-shadow var(--transicion);
}
.boton:hover, .x-contacto .boton:hover, .x-buscador button:hover { background: var(--hueso); color: var(--negro); transform: translateY(-2px); box-shadow: 0 6px 0 var(--naranja); }
.x-aviso { margin: 0 0 var(--e-5); border-radius: 14px; font-weight: 700; }

/* ---------- páginas */
.documento-cabecera { background: var(--naranja); border-bottom: 3px solid var(--negro); padding-block: var(--e-8) var(--e-7); }
.documento-cabecera-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); }
.documento-antetitulo { margin: 0 0 var(--e-3); font-weight: 700; font-size: var(--t-1); }
.documento-cabecera h1 { margin: 0; font-size: var(--t-5); font-weight: 700; line-height: .95; letter-spacing: -.045em; }
.documento-simbolo { width: 6rem; height: 6rem; flex: none; color: var(--negro); }
.documento-cuerpo { max-width: var(--ancho-texto); }
.documento-imagen { margin: var(--e-7) 0 0; }
.documento-imagen img { width: 100%; height: auto; display: block; border-radius: 18px; }
.contenido { padding-block: var(--e-7) var(--e-4); font-size: 1.1875rem; line-height: 1.7; }
.contenido > * { max-width: none; }
.contenido h2 { font-size: var(--t-4); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.contenido h3 { font-size: var(--t-3); font-weight: 700; }
.contenido a { color: var(--naranja-osc); font-weight: 700; }
.contenido strong { font-weight: 700; }
.contenido ul li::marker { color: var(--naranja-osc); }
.contenido .boton { color: var(--negro); }
.volver { margin: 0; padding-block: var(--e-5) var(--e-9); border-top: 3px solid var(--negro); }
.volver a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; font: 700 var(--t-2)/1 var(--fuente-titulos); text-decoration: none; }
.volver a:hover { color: var(--naranja-osc); }

.listado { padding-block: var(--e-7) var(--e-5); }
.x-buscador { max-width: none; gap: var(--e-3); margin-bottom: var(--e-6); }
.x-buscador input { width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 2px solid var(--negro); border-radius: 14px; background: #fff; color: var(--negro); font: 400 1.0625rem/1.4 var(--fuente-texto); }
.x-buscador input:focus { outline: none; border-color: var(--naranja-osc); box-shadow: 0 0 0 3px rgb(255 90 31 / .35); }
.resultados { list-style: none; margin: 0 0 var(--e-5); padding: 0; border-top: 3px solid var(--negro); }
.resultados li { padding-block: var(--e-5); border-bottom: 1px solid var(--color-borde); }
.resultados h2 { margin: 0 0 var(--e-2); font-size: var(--t-3); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.resultados h2 a { text-decoration: none; }
.resultados h2 a:hover { color: var(--naranja-osc); }
.resultados p { margin: 0; color: var(--tenue); }
.resultado-fecha { font-size: var(--t-0); font-weight: 700; }
.vacio { margin: 0; padding: var(--e-5); border-radius: 18px; background: var(--hueso-2); font-weight: 700; }
.paginacion a, .paginacion span[aria-current] { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }

/* 404 */
.aviso-pagina { overflow: hidden; padding-block: var(--e-8) var(--e-9); }
.aviso-rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--e-6); align-items: end; }
.perro-404 { max-width: 22rem; justify-self: end; transform: scaleX(-1); }
.titular-404 { margin-bottom: var(--e-6); }
.aviso-pagina h1 { margin: 0 0 var(--e-4); font-size: var(--t-4); font-weight: 700; line-height: .95; letter-spacing: -.045em; }
.aviso-texto { margin: 0 0 var(--e-6); font-size: var(--t-2); color: var(--tenue); }

/* ---------- pie */
.pie { border-top: 3px solid var(--negro); padding-block: var(--e-7) var(--e-6); }
.pie-rejilla { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3) var(--e-6); align-items: center; }
.pie-marca { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0; font: 700 var(--t-4)/1 var(--fuente-titulos); letter-spacing: -.04em; }
.pie-simbolo { width: 2.25rem; height: 2.25rem; color: var(--naranja-osc); }
.pie-lema { margin: 0; font-weight: 700; color: var(--tenue); }
.pie-menu ul { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); margin: 0; padding: 0; list-style: none; }
.pie-menu a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.pie-menu a:hover, .pie-menu a[aria-current] { border-bottom-color: var(--naranja); }
.pie-final { grid-column: 1 / -1; margin: var(--e-4) 0 0; padding-top: var(--e-4); border-top: 1px solid var(--color-borde); font-size: var(--t-0); color: var(--tenue); }

/* ---------- móvil y tableta */
@media (max-width: 56rem) {
  .portada-rejilla, .contacto-rejilla, .aviso-rejilla { grid-template-columns: minmax(0, 1fr); }
  .portada-perro { max-width: 22rem; margin-left: -.5rem; }
  .contacto { padding-block: var(--e-8); }
  .contacto-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); }
  .contacto-cabecera h2 { margin: 0; }
  .perro-contacto { max-width: 7rem; }
  .perro-404 { max-width: 10rem; justify-self: start; }
  .pie-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .cabecera-fila { min-height: 4rem; }
  .marca-nombre { font-size: 1.3rem; }
  .navegacion a { padding: 0 var(--e-4); }
  .portada { padding-top: var(--e-4); }
  .portada-lema { font-size: var(--t-2); }
  .eco span { -webkit-text-stroke-width: 1.5px; }
  .documento-cabecera { padding-block: var(--e-7) var(--e-6); }
  .documento-simbolo { width: 3.5rem; height: 3.5rem; }
  .contenido { font-size: 1.0625rem; }
  .x-buscador { flex-direction: column; }
  .x-contacto .boton { width: 100%; }
}

@media print {
  .navegacion, .franja, .contacto, .volver { display: none !important; }
  .documento-cabecera { background: none; }
}

/* ==================================================================== mejora de diseño (25/10/2026) */
/* portada: el cartel ocupa la primera pantalla y el ladrido se propaga en ondas concéntricas por el fondo */
.portada { isolation: isolate; display: grid; align-items: center; min-height: min(calc(100svh - 4.75rem - 6.75rem), 54rem); }
.portada::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at var(--onda-x, 31%) var(--onda-y, 50%), transparent 0 calc(3.25rem - 2px), rgb(20 18 16 / .075) calc(3.25rem - 2px) 3.25rem);
  -webkit-mask-image: radial-gradient(circle at var(--onda-x, 31%) var(--onda-y, 50%), #000 10%, transparent 62%); mask-image: radial-gradient(circle at var(--onda-x, 31%) var(--onda-y, 50%), #000 10%, transparent 62%); }
@media (min-width: 56.01rem) {
  .portada-rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
  .portada-perro { max-width: 38rem; }
}
@media (max-width: 56rem) { .portada { --onda-x: 62%; --onda-y: 26%; min-height: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .portada::before { animation: ondas 6s ease-in-out infinite alternate; }
  @keyframes ondas { from { opacity: .65; } to { opacity: 1; } }
}

/* contacto: el bloque negro con su propio eco, muy tenue */
.contacto { position: relative; isolation: isolate; overflow: hidden; }
.contacto::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 8% 72%, transparent 0 calc(3.25rem - 2px), rgb(239 232 220 / .06) calc(3.25rem - 2px) 3.25rem);
  -webkit-mask-image: radial-gradient(circle at 8% 72%, #000 5%, transparent 55%); mask-image: radial-gradient(circle at 8% 72%, #000 5%, transparent 55%); }
.x-contacto input:not([type=checkbox]), .x-contacto textarea { border-color: rgb(239 232 220 / .55); }
.x-contacto input:hover, .x-contacto textarea:hover { border-color: var(--hueso); }

/* páginas: la cabecera naranja con las ondas saliendo del símbolo */
.documento-cabecera { position: relative; isolation: isolate; overflow: hidden; }
.documento-cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 92% 70%, transparent 0 calc(2.75rem - 2px), rgb(20 18 16 / .13) calc(2.75rem - 2px) 2.75rem);
  -webkit-mask-image: radial-gradient(circle at 92% 70%, #000 8%, transparent 60%); mask-image: radial-gradient(circle at 92% 70%, #000 8%, transparent 60%); }

/* pie: el nombre retumba una última vez, enorme y cortado por el borde */
.pie { overflow: hidden; padding-bottom: 0; }
.pie-eco { position: relative; margin: var(--e-6) 0 0; height: .62em; overflow: hidden; font: 700 clamp(5rem, 24vw, 22rem)/.82 var(--fuente-titulos); letter-spacing: -.06em; white-space: nowrap; user-select: none; pointer-events: none; padding-left: var(--margen); }
.pie-eco span { position: absolute; left: var(--margen); top: 0; }
.pie-eco span:nth-child(1) { color: var(--negro); }
.pie-eco span:nth-child(2) { color: transparent; -webkit-text-stroke: 2px var(--naranja-osc); transform: translateX(.08em); opacity: .7; }
.pie-eco span:nth-child(3) { color: transparent; -webkit-text-stroke: 2px var(--negro); transform: translateX(.17em); opacity: .3; }
@media print { .pie-eco, .portada::before, .contacto::before, .documento-cabecera::before { display: none; } }