/* Tema «Toldo» · elmercadodedominios.com
   Un puesto de mercado: toldo a rayas con festón, placa esmaltada verde con el nombre, cinta con el lema, el vídeo en
   una pizarra con marco de madera y el contacto como un puesto con su toldo. Zilla Slab (rótulos) y Rubik (texto). */

:root {
  --crema: #f6efdf;
  --crema-2: #ede3cc;
  --papel: #fffaf0;
  --verde: #17503b;
  --verde-claro: #1f6249;
  --verde-osc: #0e3527;
  --tomate: #c63d24;
  --oro: #c9a04a;
  --madera: #6b4423;
  --tinta: #1d221f;
  --tenue: #5b5f58;
  --raya: 2.5rem;

  --ancho-texto: 42rem;
  --ancho-amplio: 74rem;
  --radio: 10px;
  --color-texto: var(--tinta);
  --color-fondo: var(--crema);
  --color-suave: var(--crema-2);
  --color-borde: #d9cdb2;
  --color-acento: var(--verde);
  --color-acento-texto: var(--crema);
  --color-tenue: var(--tenue);
  --fuente-texto: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulos: "Zilla Slab", Rockwell, Georgia, serif;

  --t-0: .875rem;
  --t-1: 1rem;
  --t-2: 1.125rem;
  --t-3: 1.375rem;
  --t-4: clamp(1.75rem, 3.2vw, 2.25rem);
  --t-5: clamp(2.25rem, 5vw, 3.75rem);
  --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);
  --rayas: repeating-linear-gradient(90deg, var(--tomate) 0 var(--raya), var(--papel) var(--raya) calc(2 * var(--raya)));
  --transicion: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--verde) var(--crema-2); accent-color: var(--verde); }
body { display: flex; flex-direction: column; min-height: min(100vh, 75rem); margin: 0; background: var(--crema); color: var(--tinta); font: 400 1.0625rem/1.6 var(--fuente-texto); }
::selection { background: var(--verde); color: var(--crema); }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color var(--transicion), background-color var(--transicion), border-color var(--transicion); }
:focus-visible { outline: 3px solid var(--tomate); 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(--verde); color: var(--crema); padding: var(--e-3) var(--e-4); font-weight: 600; }
.saltar:focus { top: var(--e-4); }

/* ---------- toldo con festón */
.toldo, .puesto-toldo { position: relative; height: 2.5rem; background: var(--rayas); filter: drop-shadow(0 5px 3px rgb(60 40 10 / .18)); }
.toldo::after, .puesto-toldo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--raya) / 2); background: var(--rayas);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 calc(var(--raya) / 2 - .5px), transparent calc(var(--raya) / 2)) 0 0 / var(--raya) calc(var(--raya) / 2) repeat-x;
  mask: radial-gradient(circle at 50% 0, #000 calc(var(--raya) / 2 - .5px), transparent calc(var(--raya) / 2)) 0 0 / var(--raya) calc(var(--raya) / 2) repeat-x;
}
.toldo { border-bottom: 0; }

/* ---------- cabecera */
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 4.5rem; padding-top: calc(var(--raya) / 2 + .5rem); }
.marca { display: inline-flex; align-items: center; gap: var(--e-3); min-height: 2.75rem; text-decoration: none; }
.marca-placa { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 8px; background: var(--verde); color: var(--crema); box-shadow: inset 0 0 0 3px var(--verde), inset 0 0 0 4.5px var(--crema); font: 700 1.35rem/1 var(--fuente-titulos); }
.marca-nombre { font: 700 var(--t-3)/1.05 var(--fuente-titulos); }
.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(--verde); color: var(--crema); font-weight: 600; text-decoration: none; }
.navegacion a:hover { background: var(--tomate); }

/* ---------- placa esmaltada */
.portada { padding-block: var(--e-7) var(--e-8); }
.portada-interior { display: flex; flex-direction: column; align-items: center; text-align: center; }
.placa {
  position: relative; max-width: 100%; padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.75rem, 6vw, 5rem); border-radius: 22px; color: var(--crema);
  background: radial-gradient(130% 160% at 25% 15%, var(--verde-claro), var(--verde) 55%, var(--verde-osc));
  box-shadow: inset 0 0 0 7px var(--verde), inset 0 0 0 10px var(--crema), inset 0 0 0 12px var(--verde), 0 3px 0 var(--verde-osc), 0 26px 40px -20px rgb(30 20 0 / .55);
}
.placa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(165deg, rgb(255 255 255 / .2), transparent 38%); pointer-events: none; }
.placa-tornillo { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3f1ea, #9a968a 70%); box-shadow: 0 1px 1px rgb(0 0 0 / .4); }
.placa-tornillo::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #77736a; transform: rotate(35deg); }
.placa-tornillo:nth-child(1) { top: 22px; left: 22px; }
.placa-tornillo:nth-child(2) { top: 22px; right: 22px; }
.placa-tornillo:nth-child(3) { bottom: 22px; left: 22px; }
.placa-tornillo:nth-child(4) { bottom: 22px; right: 22px; }
.placa-texto { position: relative; z-index: 1; margin: 0; }
.placa-renglon-1 { display: block; font: 500 italic clamp(1.375rem, 3vw, 2.25rem)/1.1 var(--fuente-titulos); color: var(--oro); }
.placa-renglon-2 { display: block; margin-top: .1em; font: 700 clamp(2.125rem, 8.5vw, 6.5rem)/1 var(--fuente-titulos); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 0 var(--verde-osc); }
.cinta { margin: calc(-1 * var(--e-4)) 0 0; position: relative; z-index: 2; }
.cinta span {
  display: inline-block; padding: .7rem 2.75rem; background: var(--tomate); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 1.25rem) 50%, 100% 100%, 0 100%, 1.25rem 50%);
  font: 700 var(--t-2)/1.2 var(--fuente-texto); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 12px -6px rgb(0 0 0 / .4);
}

/* ---------- mostrador: el titular y el vídeo de la portada */
.mostrador { padding-block: var(--e-8) var(--e-9); background: var(--crema-2); border-top: 1px solid var(--color-borde); }
.mostrador-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-7); align-items: center; }
.mostrador-texto h1 { margin: 0; font-size: var(--t-5); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; color: var(--verde-osc); }
.mostrador-accion { margin: var(--e-6) 0 0; }
.mostrador-contenido { padding: 0; }
.mostrador-contenido > * { max-width: none; margin: 0; }
.mostrador-contenido figure.video { margin: 0; padding: 0; border: 14px solid var(--madera); border-radius: 8px; background: #18211c; box-shadow: inset 0 0 0 2px #4d2f16, 0 2px 0 #4d2f16, 0 26px 40px -22px rgb(30 20 0 / .6); }
.contenido figure.video > .x-video { display: grid; border-radius: 0; background: radial-gradient(120% 100% at 50% 40%, #2c3d34, #17201b); }
.contenido figure.video > .x-video::before { background: repeating-linear-gradient(-8deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 9px); opacity: 1; }
.x-video-icono { color: var(--tomate); }
.x-video-texto { font-family: var(--fuente-texto); }

/* ---------- botones */
.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.9rem; border: 0; border-radius: 999px;
  background: var(--verde); color: var(--crema); font: 600 var(--t-2)/1.1 var(--fuente-texto); text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 var(--verde-osc); transition: background-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover, .x-contacto .boton:hover, .x-buscador button:hover { background: var(--tomate); box-shadow: 0 3px 0 #8d2a17; transform: translateY(-1px); }
.boton:active, .x-contacto .boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--verde-osc); }

/* ---------- puesto de contacto */
.puesto { padding-block: var(--e-9); }
.puesto-caja { max-width: 50rem; margin-inline: auto; }
.puesto-toldo { height: 3rem; border-radius: 10px 10px 0 0; }
.puesto-cuerpo { padding: calc(var(--raya) / 2 + var(--e-6)) clamp(1.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem); background: var(--papel); border: 1px solid var(--color-borde); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 26px 40px -26px rgb(30 20 0 / .45); }
.puesto-cuerpo h2 { margin: 0 0 var(--e-6); font-size: var(--t-5); font-weight: 700; line-height: 1; text-align: center; color: var(--verde-osc); }

/* formulario del motor */
.x-contacto { max-width: none; gap: var(--e-5); scroll-margin-top: 9rem; }
.x-contacto label { font-weight: 600; font-size: var(--t-1); }
.x-contacto label span { font-weight: 400; color: var(--tenue); }
.x-contacto input:not([type=checkbox]), .x-contacto textarea, .x-buscador input {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1.5px solid #bfb193; border-radius: var(--radio); background: #fff; color: var(--tinta);
  font: 400 1.0625rem/1.4 var(--fuente-texto); transition: border-color var(--transicion), box-shadow var(--transicion);
}
.x-contacto textarea { min-height: 9rem; resize: vertical; }
.x-contacto input:focus, .x-contacto textarea:focus, .x-buscador input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgb(23 80 59 / .22); }
.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; }
.x-contacto .x-acepto a { color: var(--verde); font-weight: 600; }
.x-contacto .boton { width: 100%; }
.x-aviso { margin: 0 0 var(--e-5); border-radius: var(--radio); font-weight: 600; }

/* ---------- páginas */
.documento-cabecera { padding-block: var(--e-7) var(--e-6); }
.documento-cabecera .envoltorio { max-width: var(--ancho-texto); }
.documento-antetitulo { margin: 0 0 var(--e-3); font: 500 italic var(--t-2)/1.2 var(--fuente-titulos); color: var(--tomate); }
.documento-cabecera h1 { margin: 0; padding-bottom: var(--e-5); font-size: var(--t-5); font-weight: 700; line-height: 1.02; color: var(--verde-osc); border-bottom: 8px solid transparent; border-image: var(--rayas) 8; }
.documento-cuerpo { max-width: var(--ancho-texto); }
.documento-imagen { margin: var(--e-6) 0 0; }
.documento-imagen img { width: 100%; height: auto; display: block; border-radius: var(--radio); }
.contenido { padding-block: var(--e-5) var(--e-4); font-size: 1.125rem; line-height: 1.7; }
.contenido > * { max-width: none; }
.contenido h2 { font-size: var(--t-4); font-weight: 700; line-height: 1.12; color: var(--verde-osc); }
.contenido h2.titulo-mayusculas { margin-top: 2em; font-size: var(--t-2); letter-spacing: .06em; line-height: 1.35; padding-top: var(--e-3); border-top: 2px solid var(--verde); text-transform: uppercase; }
.contenido h3 { font-size: var(--t-3); }
.contenido a { color: var(--verde); font-weight: 500; }
.contenido strong { font-weight: 600; }
.contenido ul li::marker { color: var(--tomate); }
.contenido .boton { color: var(--crema); }
/* botón dentro de un párrafo (p. ej. «Cambiar mi elección sobre las cookies»): compacto y en línea con el texto */
.contenido p > .boton { min-height: 2.75rem; margin-block: .2rem; padding: .4rem 1.1rem; border-radius: 999px; font-size: 1rem; vertical-align: middle; }
.volver { margin: 0; padding-block: var(--e-5) var(--e-9); border-top: 1px solid var(--color-borde); }
.volver a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.volver a:hover { color: var(--tomate); }

.listado { padding-block: var(--e-5); }
.x-buscador { max-width: none; gap: var(--e-3); margin-bottom: var(--e-6); }
.resultados { list-style: none; margin: 0 0 var(--e-5); padding: 0; }
.resultados li { padding-block: var(--e-5); border-bottom: 1px solid var(--color-borde); }
.resultados li:last-child { border-bottom: 0; }
.resultados h2 { margin: 0 0 var(--e-2); font-size: var(--t-3); line-height: 1.2; color: var(--verde-osc); }
.resultados h2 a { text-decoration: none; }
.resultados h2 a:hover { text-decoration: underline; color: var(--tomate); }
.resultados p { margin: 0; color: var(--tenue); }
.vacio { margin: 0; padding: var(--e-5); border-radius: var(--radio); background: var(--crema-2); font-weight: 500; }
.paginacion a, .paginacion span[aria-current] { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }

/* 404 */
.aviso-pagina { padding-block: var(--e-8) var(--e-9); }
.aviso-interior { display: flex; flex-direction: column; align-items: center; text-align: center; }
.placa-404 { margin-bottom: var(--e-6); }
.placa-404 .placa-renglon-2 { font-size: clamp(4rem, 14vw, 8rem); }
.aviso-pagina h1 { margin: 0 0 var(--e-3); font-size: var(--t-5); font-weight: 700; line-height: 1; color: var(--verde-osc); }
.aviso-texto { margin: 0 0 var(--e-6); font-size: var(--t-2); color: var(--tenue); }

/* ---------- pie */
.pie { position: relative; padding-block: var(--e-7) var(--e-6); background: var(--verde); color: var(--crema); }
.pie::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--rayas); }
.pie-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5) var(--e-7); align-items: center; }
.pie-nombre { margin: 0; font: 700 var(--t-4)/1.05 var(--fuente-titulos); }
.pie-lema { margin: var(--e-2) 0 0; font: 500 italic var(--t-2)/1.2 var(--fuente-titulos); color: var(--oro); }
.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; text-decoration: none; border-bottom: 2px solid transparent; }
.pie-menu a:hover, .pie-menu a[aria-current] { border-bottom-color: var(--oro); color: #fff; }
.pie :focus-visible { outline-color: var(--oro); }
.pie-final { grid-column: 1 / -1; margin: 0; padding-top: var(--e-4); border-top: 1px solid rgb(246 239 223 / .25); font-size: var(--t-0); color: #d9dfd2; }

/* aviso de cookies del motor con la tipografía del tema */
body .x-cookies { font-family: var(--fuente-texto); }

/* ---------- móvil y tableta */
@media (max-width: 56rem) {
  .mostrador-rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .pie-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  :root { --raya: 2rem; }
  .toldo { height: 1.75rem; }
  .cabecera-fila { min-height: 4rem; }
  .marca-nombre { font-size: var(--t-2); }
  .marca-placa { width: 2.25rem; height: 2.25rem; font-size: 1.2rem; }
  .navegacion a { padding: 0 var(--e-4); }
  .portada { padding-top: var(--e-6); }
  .placa { border-radius: 16px; }
  .placa-tornillo { width: 9px; height: 9px; }
  .placa-tornillo:nth-child(1) { top: 16px; left: 16px; }
  .placa-tornillo:nth-child(2) { top: 16px; right: 16px; }
  .placa-tornillo:nth-child(3) { bottom: 16px; left: 16px; }
  .placa-tornillo:nth-child(4) { bottom: 16px; right: 16px; }
  .cinta span { padding: .6rem 2rem; font-size: var(--t-1); letter-spacing: .1em; }
  .mostrador-contenido figure.video { border-width: 9px; }
  .contenido { font-size: 1.0625rem; }
  .x-buscador { flex-direction: column; }
}

@media print {
  .toldo, .navegacion, .puesto, .volver { display: none !important; }
  .pie { background: none; color: #000; }
}