/* elhogar.net · Ferretería El Hogar
   Concepto: el rótulo amarillo de Elcano 18 y la llave del emblema.
   Tokens: rótulo (amarillo), tinta (negro del rótulo), estantería (azul de la tienda),
   papel (amarillo muy claro), hoja (blanco). Gesto único: el dentado de llave. */

@font-face { font-family: "Fraunces"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-style: italic; font-display: swap; src: url("../fonts/fraunces-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/public-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --rotulo: #ffd004;
  --tinta: #000;
  --texto: #1d1b14;
  --estanteria: #124a9c;
  --papel: #fff8d2;
  --hoja: #fff;
  --apagado: #5c5843;
  --raya: #e6dc9c;
  --letrero: "Fraunces", Georgia, "Times New Roman", serif;
  --lectura: "Public Sans", "Segoe UI", Arial, sans-serif;
  --u: 8px;
  --ancho: 1240px;
  --radio: 18px;
  --dentado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='32' viewBox='0 0 448 32'%3E%3Cpath fill='%23ffd004' d='M0 0H448 L448 30 L422 20 L392 20 L366 8 L336 8 L310 30 L280 30 L254 18 L224 18 L198 4 L168 4 L142 24 L112 24 L86 10 L56 10 L30 30 L0 30Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--u) * 3); }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 1.125rem/1.6 var(--lectura); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--estanteria); text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--estanteria); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--letrero); color: var(--tinta); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-weight: 900; }
h2, h3 { font-weight: 600; }
p, ul, ol, dl, table, figure { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--u); top: -100px; z-index: 50; background: var(--tinta); color: var(--rotulo); padding: var(--u) calc(var(--u) * 2); border-radius: 999px; }
.saltar:focus { top: var(--u); }
.ancho { width: min(100% - var(--u) * 4, var(--ancho)); margin-inline: auto; }

/* ---------- Rótulo (cabecera) ---------- */
.rotulo { background: var(--rotulo); color: var(--tinta); position: relative; z-index: 2; }
.rotulo::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 32px; background: var(--dentado) repeat-x 0 0; pointer-events: none; }
.portada .rotulo::after { content: none; }
.rotulo__dentro { width: min(100% - var(--u) * 4, var(--ancho)); margin-inline: auto; display: flex; align-items: center; gap: calc(var(--u) * 4); padding-block: calc(var(--u) * 2); }
.rotulo__marca { color: inherit; text-decoration: none; display: grid; line-height: 1; }
.rotulo__nombre { font: 900 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1 var(--letrero); letter-spacing: -0.01em; }
.rotulo__lema { display: flex; gap: calc(var(--u) * 2); align-items: baseline; margin-top: 6px; font-size: 0.9375rem; }
.rotulo__lema em { font: italic 600 1rem/1 var(--letrero); }
.rotulo__menu { margin-left: auto; }
.rotulo__menu ul { list-style: none; padding: 0; display: flex; gap: calc(var(--u) * 0.5); }
.rotulo__menu a { display: block; padding: var(--u) calc(var(--u) * 2); border-radius: 999px; color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 1rem; }
.rotulo__menu a:hover { background: var(--tinta); color: var(--rotulo); }
.rotulo__menu a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--tinta); }
.rotulo__telefono { display: grid; text-align: right; line-height: 1.1; }
.rotulo__telefono span { font-size: 0.875rem; }
.rotulo__telefono a { color: var(--tinta); text-decoration: none; font: 900 1.5rem/1 var(--letrero); }
.rotulo__telefono a:hover { text-decoration: underline; }

/* ---------- Botones (píldoras) ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--u) calc(var(--u) * 3); border-radius: 999px; border: 2px solid var(--tinta); background: var(--tinta); color: var(--rotulo); font: 700 1.0625rem/1.2 var(--lectura); text-decoration: none; cursor: pointer; text-align: center; }
.boton:hover { background: var(--rotulo); color: var(--tinta); }
.boton--claro { background: var(--hoja); color: var(--tinta); }
.boton--claro:hover { background: var(--tinta); color: var(--rotulo); }
.acciones { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--u); }
.acciones__nota { font-size: 0.9375rem; color: var(--apagado); margin-top: var(--u); }

/* ---------- Portada: dos bandas ---------- */
.entrada-portada { background: var(--rotulo); position: relative; }
.entrada-portada::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 32px; background: var(--dentado) repeat-x 0 0; z-index: 1; pointer-events: none; }
.entrada-portada__dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 6); align-items: center; padding-block: calc(var(--u) * 5) calc(var(--u) * 8); }
.entrada-portada h1 { font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem); line-height: 0.98; letter-spacing: -0.02em; max-width: 13ch; }
.entrada-portada__lema { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); max-width: 46ch; margin: calc(var(--u) * 3) 0; color: var(--tinta); }
.entrada-portada .acciones__nota { color: var(--tinta); }
.entrada-portada__emblema { width: clamp(180px, 26vw, 360px); border-radius: 50%; box-shadow: 0 0 0 6px var(--tinta); }
.urgencias { background: var(--tinta); color: var(--hoja); }
.urgencias__dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); padding-block: calc(var(--u) * 9) calc(var(--u) * 5); }
.urgencias__texto { max-width: 44ch; font-size: 1.25rem; }
.urgencias__texto strong { color: var(--rotulo); font: 600 1.75rem/1.1 var(--letrero); display: block; margin-bottom: var(--u); }
.urgencias__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); }
.urgencias__telefono { color: var(--rotulo); font: 900 clamp(2.5rem, 1.5rem + 4vw, 4.5rem)/1 var(--letrero); text-decoration: none; white-space: nowrap; }
.urgencias__telefono:hover { color: var(--hoja); }
.urgencias__mas { color: var(--hoja); }
.urgencias__mas:hover { color: var(--rotulo); }

.seccion { padding-block: calc(var(--u) * 8); }
.seccion + .seccion { border-top: 2px solid var(--tinta); }
.seccion > h2, .seccion h2:first-child { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: calc(var(--u) * 3); max-width: 22ch; }
.seccion p { max-width: 68ch; }
.seccion p + p { margin-top: calc(var(--u) * 2); }

/* ---------- Directorio: lista con miniatura ---------- */
.directorio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: calc(var(--u) * 6) calc(var(--u) * 8); }
.directorio .directorio__titulo { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); padding-bottom: calc(var(--u) * 2); border-bottom: 2px solid var(--tinta); margin: 0; max-width: none; }
.directorio__lista { list-style: none; padding: 0; }
.directorio__lista li { border-bottom: 1px solid var(--raya); }
.fila { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: calc(var(--u) * 2); align-items: center; padding: calc(var(--u) * 1.5) var(--u); color: var(--texto); text-decoration: none; border-radius: 40px; }
.fila:hover { background: var(--rotulo); color: var(--tinta); }
.fila__foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--hoja); box-shadow: 0 0 0 2px var(--tinta); }
.fila__texto { display: grid; line-height: 1.3; }
.fila__texto strong { font: 600 1.375rem/1.2 var(--letrero); color: var(--tinta); }
.fila__texto span { color: var(--apagado); font-size: 1rem; }
.fila:hover .fila__texto span { color: var(--tinta); }

/* ---------- Tienda, cifras, oficial, visita ---------- */
.tienda { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--u) * 8); align-items: start; }
.cifras { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 4); margin-top: calc(var(--u) * 5); }
.cifras div { display: grid; }
.cifras dt { order: 2; color: var(--apagado); font-size: 1rem; }
.cifras dd { margin: 0; font: 900 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--letrero); color: var(--tinta); white-space: nowrap; }
.tienda__fotos { columns: 3; column-gap: calc(var(--u) * 2); }
.tienda__fotos figure { break-inside: avoid; margin-bottom: calc(var(--u) * 2); }
.tienda__fotos img, .fotos img { border-radius: var(--radio); background: var(--hoja); }
figcaption { font-size: 0.9375rem; color: var(--apagado); padding: var(--u) var(--u) 0; line-height: 1.35; }
.oficial p { font-size: 1.1875rem; }
.visita { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: calc(var(--u) * 8); }
.visita h3 { font-size: 1.5rem; margin-bottom: calc(var(--u) * 2); }
.visita__direccion { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--letrero); color: var(--tinta); }
.visita .horario + p { margin-top: calc(var(--u) * 2); }

.horario { border-collapse: collapse; width: 100%; max-width: 30rem; }
.horario th, .horario td { text-align: left; vertical-align: top; padding: var(--u) 0; border-bottom: 1px solid var(--raya); font-weight: 400; }
.horario th { padding-right: calc(var(--u) * 2); font-weight: 700; white-space: nowrap; }
.horario small { display: block; color: var(--apagado); font-size: 0.9375rem; }

.mapa { margin-top: calc(var(--u) * 3); }
.mapa__acciones { display: flex; flex-wrap: wrap; gap: var(--u); }
.mapa__nota { font-size: 0.9375rem; color: var(--apagado); margin-top: var(--u); }
.mapa--cargado { border-radius: var(--radio); overflow: hidden; border: 2px solid var(--tinta); }
.mapa iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Páginas interiores: título lateral fijo ---------- */
.doble { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: calc(var(--u) * 7); align-items: start; padding-block: calc(var(--u) * 11) calc(var(--u) * 8); }
.lateral { position: sticky; top: calc(var(--u) * 4); }
.lateral h1, .cabecera-simple h1 { font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.25rem); letter-spacing: -0.015em; }
.entrada { font-size: 1.25rem; line-height: 1.45; margin-top: calc(var(--u) * 2); max-width: 46ch; }
.lateral .acciones { margin-top: calc(var(--u) * 3); display: grid; }
.lateral .acciones .boton { width: 100%; }
.urgencia { margin-top: calc(var(--u) * 2); font-weight: 700; }
.urgencia a { color: var(--tinta); font: 900 1.75rem/1 var(--letrero); text-decoration: none; white-space: nowrap; }
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--u); font-size: 0.9375rem; margin-bottom: calc(var(--u) * 2); }
.migas li + li::before { content: "/"; margin-right: var(--u); color: var(--apagado); }
.migas a { color: var(--texto); }
.cabecera-simple { padding-top: calc(var(--u) * 11); }

.texto { background: var(--hoja); border-radius: var(--radio); padding: clamp(calc(var(--u) * 3), 4vw, calc(var(--u) * 7)); min-width: 0; }
.texto > * + * { margin-top: calc(var(--u) * 2); }
.texto p, .texto li, .texto dd { max-width: 68ch; }
.texto h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-top: calc(var(--u) * 7); padding-top: calc(var(--u) * 4); border-top: 2px solid var(--tinta); }
.texto > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texto h3 { font-size: 1.3125rem; margin-top: calc(var(--u) * 5); }
.texto h2 + h3 { margin-top: calc(var(--u) * 3); }
.texto ul, .texto ol { padding-left: 1.25em; }
.texto li + li { margin-top: calc(var(--u) * 0.5); }
.texto .destacado { font: 600 1.5rem/1.3 var(--letrero); color: var(--tinta); }
.texto .nota { color: var(--apagado); font-size: 0.9375rem; }
.texto .precio { font-weight: 700; background: var(--papel); border-left: 6px solid var(--rotulo); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); border-radius: 0 12px 12px 0; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: calc(var(--u) * 2); align-items: start; }
.texto .fotos { margin-top: calc(var(--u) * 3); }
.fotos img { width: 100%; border: 1px solid var(--raya); }

.texto .descargas { list-style: none; padding: 0; }
.descarga { font-weight: 700; }
.descarga::before { content: "PDF"; display: inline-block; margin-right: var(--u); padding: 2px 8px; border-radius: 999px; background: var(--tinta); color: var(--rotulo); font-size: 0.75rem; font-weight: 700; vertical-align: 0.15em; text-decoration: none; }
.peso { color: var(--apagado); font-size: 0.9375rem; white-space: nowrap; }
.video { font-weight: 700; }
.texto .marcas { list-style: none; padding: 0; columns: 150px 5; column-gap: calc(var(--u) * 3); }
.texto .marcas li { margin: 0; padding: 3px 0; break-inside: avoid; }
.preguntas dt { font: 600 1.1875rem/1.3 var(--letrero); color: var(--tinta); margin-top: calc(var(--u) * 3); }
.preguntas dt:first-child { margin-top: 0; }
.preguntas dd { margin: var(--u) 0 0; }
.ficha div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--u) calc(var(--u) * 2); padding: var(--u) 0; border-bottom: 1px solid var(--raya); }
.ficha dt { font-weight: 700; }
.ficha dd { margin: 0; }
.tabla-desplaza { overflow-x: auto; }
.tabla { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 1rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: calc(var(--u) * 1.5); border-bottom: 1px solid var(--raya); }
.tabla thead th { border-bottom: 2px solid var(--tinta); }

.otras { padding-block: 0 calc(var(--u) * 8); }
.otras h2 { font-size: 1.5rem; margin-bottom: calc(var(--u) * 2); }
.otras ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--u); }
.otras a { display: block; padding: var(--u) calc(var(--u) * 2); border: 2px solid var(--tinta); border-radius: 999px; color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 1rem; background: var(--hoja); }
.otras a:hover { background: var(--rotulo); }

/* ---------- Formulario ---------- */
.formulario { display: grid; gap: calc(var(--u) * 2.5); max-width: 44rem; }
.formulario label { display: grid; gap: 6px; font-weight: 700; }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario textarea { font: 400 1.125rem/1.4 var(--lectura); color: var(--texto); padding: calc(var(--u) * 1.5); border: 2px solid var(--tinta); border-radius: 12px; background: var(--hoja); width: 100%; }
.formulario textarea { resize: vertical; }
.formulario__pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: calc(var(--u) * 2.5); }
.formulario__motivo { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 3); }
.formulario__motivo legend { font-weight: 700; padding: 0; margin-bottom: var(--u); }
.formulario__motivo label, .formulario .formulario__casilla { display: flex; gap: var(--u); align-items: flex-start; font-weight: 400; }
.formulario input[type="radio"], .formulario input[type="checkbox"] { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--tinta); flex: none; }
.trampa { position: absolute; left: -9999px; }
.aviso-datos { background: var(--papel); border-radius: 12px; padding: calc(var(--u) * 2); font-size: 0.9375rem; }
.formulario .boton { justify-self: start; }
.formulario__estado { min-height: 1.6em; font-weight: 700; }
.formulario__estado.es-error { color: #a01a10; }

/* ---------- Pie claro con columnas ---------- */
.pie { background: var(--hoja); border-top: 2px solid var(--tinta); font-size: 1rem; }
.pie__dentro { width: min(100% - var(--u) * 4, var(--ancho)); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: calc(var(--u) * 5); padding-block: calc(var(--u) * 7); }
.pie__nombre { font: 900 1.5rem/1.1 var(--letrero); color: var(--tinta); }
.pie__titulo { font: 600 1.1875rem/1.2 var(--letrero); color: var(--tinta); margin-bottom: var(--u); }
.pie__col > * + * { margin-top: calc(var(--u) * 1.5); }
.pie ul { list-style: none; padding: 0; }
.pie li { padding: 3px 0; }
.pie a { color: var(--texto); }
.pie .horario th { white-space: normal; }
.pie__legal { width: min(100% - var(--u) * 4, var(--ancho)); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--u) calc(var(--u) * 3); padding-block: calc(var(--u) * 2); border-top: 1px solid var(--raya); font-size: 0.9375rem; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 0 calc(var(--u) * 3); }

/* ---------- Barra inferior del móvil y hoja de menú ---------- */
.barra, .hoja { display: none; }

@media (max-width: 899px) {
  body { padding-bottom: 72px; }
  .rotulo__menu, .rotulo__telefono { display: none; }
  .rotulo__dentro { padding-block: calc(var(--u) * 1.5); }
  .barra { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--tinta); padding-bottom: env(safe-area-inset-bottom); }
  .barra__boton { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; min-height: 64px; color: var(--rotulo); background: none; border: 0; font: 700 0.8125rem/1.1 var(--lectura); text-decoration: none; cursor: pointer; }
  .barra__boton + .barra__boton { border-left: 1px solid #333; }
  .barra__boton:focus-visible { outline-color: var(--hoja); outline-offset: -4px; }
  .hoja:not([hidden]) { display: block; position: fixed; inset: 0 0 64px 0; z-index: 29; background: rgba(0, 0, 0, 0.5); }
  .hoja__dentro { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow-y: auto; background: var(--rotulo); border-radius: 24px 24px 0 0; padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 4); }
  .hoja ul { list-style: none; padding: 0; margin: 0; }
  .hoja__principal a { display: block; padding: calc(var(--u) * 1.25) 0; font: 900 1.625rem/1.15 var(--letrero); color: var(--tinta); text-decoration: none; }
  .hoja__titulo { font-weight: 700; margin: calc(var(--u) * 3) 0 var(--u); padding-top: calc(var(--u) * 2); border-top: 2px solid var(--tinta); }
  .hoja__lista { columns: 2; column-gap: calc(var(--u) * 2); }
  .hoja__lista a { display: block; padding: 6px 0; color: var(--tinta); break-inside: avoid; }
  .entrada-portada__dentro { grid-template-columns: 1fr; padding-block: calc(var(--u) * 3) calc(var(--u) * 6); gap: calc(var(--u) * 3); }
  .entrada-portada__emblema { width: 132px; grid-row: 1; box-shadow: 0 0 0 4px var(--tinta); }
  .entrada-portada .acciones { display: grid; }
  .seccion { padding-block: calc(var(--u) * 6); }
  .tienda { grid-template-columns: 1fr; gap: calc(var(--u) * 5); }
  .tienda__fotos { columns: 2; }
  .doble { grid-template-columns: 1fr; gap: calc(var(--u) * 4); padding-block: calc(var(--u) * 9) calc(var(--u) * 6); }
  .lateral { position: static; }
  .ficha div { grid-template-columns: 1fr; gap: 0; }
  .fotos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 420px) {
  .fila { grid-template-columns: 52px minmax(0, 1fr); }
  .fila__foto { width: 52px; height: 52px; }
  .tienda__fotos { column-gap: var(--u); }
}
@media (prefers-reduced-motion: no-preference) {
  .fila, .boton, .rotulo__menu a, .otras a { transition: background-color 0.15s, color 0.15s; }
}
@media print {
  .rotulo__menu, .barra, .hoja, .acciones, .otras, .mapa { display: none; }
  body { background: #fff; padding: 0; }
}
.fotos:has(> figure:only-child) { grid-template-columns: minmax(0, 440px); }