/* Azulejos Bou — hoja de estilos. Sin librerías.
   Showroom de cerámica familiar: mucho aire, una sola foto en la portada, listas con filetes, mosaico corto de la
   exposición. Los colores son los del logo (lo pidió el usuario el 2026-11-05): el crema de su fondo, el verde y el
   amarillo de Tot Cerámica y el gris pardo del nombre, que pasan AA tal cual. Titulares en Fraunces, texto en Outfit.
   Texto a 16 px o más, zonas táctiles de 44 px como mínimo. Desde el 2026-11-06 (lo pidió el usuario): fotos de
   ambiente de azulejos actuales junto a algunos textos y enlaces sin subrayado. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/outfit-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit-600.woff2') format('woff2');
}

:root {
  /* Sacados del logo (contenido/img_original/logo-azulejosbou.png) */
  --galleta: #fef5df; /* el crema del fondo del logo: fondo general */
  --blanco-roto: #fffaf0; /* cabecera y bandas alternas */
  --tinta: #4b4034; /* el gris pardo de «Azulejos Bou»: texto (9,3:1 sobre el crema) */
  --piedra-oscura: #675a4c; /* texto secundario (6,2:1) */
  --piedra: #b9a98a; /* filetes; nunca texto */
  --piedra-clara: #ecdfc3; /* bordes finos */
  --verde: #0e640c; /* el verde de Tot Cerámica: enlaces, botones, foco y pie (6,8:1 sobre el crema) */
  --verde-oscuro: #0a4a09; /* al pasar */
  --amarillo: #fedc05; /* el amarillo de Tot Cerámica: franja de arriba y botón fijo del móvil (verde encima: 5,4:1) */
  --crema-pie: #e9dcc0; /* texto secundario del pie, sobre el verde (5,4:1) */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho: 1080px;
  --margen: clamp(20px, 4vw, 40px);
  --seccion: clamp(56px, 8vw, 112px);
  --aire-mapa: calc((1rem + var(--seccion)) / 2); /* en Contacto, encima y debajo de «Ver mapa de Google» */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--tinta);
  background: var(--galleta);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17 px */
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

p,
ul,
dl {
  margin: 0 0 1rem;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

/* Enlaces sin subrayado (lo pidió el usuario el 2026-11-06): en el contenido los distinguen el verde y el seminegrita */
a {
  color: var(--verde);
  text-decoration: none;
}

main a {
  font-weight: 600;
}

a:hover {
  color: var(--verde-oscuro);
}

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

.pie :focus-visible {
  outline-color: var(--amarillo);
}

.visor :focus-visible {
  outline-color: var(--galleta);
}

.saltar {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 50;
  padding: 0.75rem 1rem;
  color: var(--galleta);
  background: var(--verde);
}

.saltar:focus {
  top: 1rem;
}

/* ---------- Cabecera: wordmark a la izquierda, menú y teléfono a la derecha ---------- */

.cabecera {
  background: var(--blanco-roto);
  border-top: 4px solid var(--amarillo); /* la franja amarilla de Tot Cerámica */
  border-bottom: 1px solid var(--piedra-clara);
}

.cabecera__interior {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: var(--ancho);
  min-height: 76px;
  margin-inline: auto;
  padding: 0.75rem var(--margen);
}

/* El logo del cliente (sin su fondo crema), tal cual: ni se recolorea ni se deforma */
.marca {
  display: block;
  width: 168px;
  padding-block: 0.25rem; /* zona táctil de 44 px o más; el margen negativo deja la cabecera igual */
  margin-block: -0.25rem;
}

.marca img {
  width: 100%;
  height: auto;
}

@media (min-width: 860px) {
  .marca {
    width: 210px;
  }
}

.menu-boton {
  min-height: 44px;
  padding: 0 0.25rem;
  color: var(--tinta);
  font: 600 1rem var(--sans);
  background: none;
  border: 0;
  cursor: pointer;
}

/* En el móvil el menú se despliega bajo la cabecera al pulsar «Menú»; sin JavaScript queda siempre a la vista */
.menu {
  flex-basis: 100%;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}

.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--verde);
}

.menu__tel {
  color: var(--verde) !important;
}

.cabecera.con-menu .menu {
  display: none;
}

.cabecera.con-menu .menu.abierto {
  display: block;
  padding-top: 0.5rem;
  border-top: 1px solid var(--piedra-clara);
}

@media (min-width: 860px) {
  .menu-boton {
    display: none;
  }

  .menu,
  .cabecera.con-menu .menu {
    display: flex;
    flex-basis: auto;
    align-items: center;
    gap: 2rem;
  }

  .menu ul {
    display: flex;
    gap: 1.75rem;
  }
}

/* ---------- Portada: una foto con margen fino y el texto a la izquierda ---------- */

.portada {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--margen) var(--margen) 0;
}

.portada__foto {
  position: relative;
}

.portada__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.portada__texto {
  padding: 1.5rem 0 0;
}

.portada__texto h1 {
  margin-bottom: 0.5rem;
}

.portada__texto p {
  max-width: 34ch;
  font-size: 1.125rem;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
}

@media (min-width: 860px) {
  .portada__foto img {
    aspect-ratio: 16 / 9;
  }

  .portada__texto {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 560px;
    margin: 0 0 40px 40px;
    padding: 2rem 2.25rem 2rem 2rem;
    background: rgba(255, 250, 240, 0.95);
  }
}

/* ---------- Botones y enlaces ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.5rem;
  color: #ffffff;
  font: 600 1rem var(--sans);
  text-decoration: none;
  background: var(--verde);
  border: 1px solid var(--verde);
  cursor: pointer;
}

.boton:hover {
  color: #ffffff;
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
}

.boton--linea {
  color: var(--verde);
  background: none;
}

.boton--linea:hover {
  color: #ffffff;
  background: var(--verde);
}

/* enlaces de «seguir leyendo»: sin subrayado, con la flecha del propio texto */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.enlace-flecha::after {
  content: ' \2192';
  margin-left: 0.35em;
}

/* Teléfono y correo sueltos (fuera de una frase): zona táctil de 44 px o más sin mover nada, con relleno arriba y
   abajo y un margen negativo igual */
.contacto-rapido a,
.datos a,
.ficha-legal a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}

/* ---------- Bloques de contenido ---------- */

.bloque {
  padding: var(--seccion) var(--margen);
}

.bloque--claro {
  background: var(--blanco-roto);
}

.bloque__interior {
  max-width: var(--ancho);
  margin-inline: auto;
}

.bloque__interior--texto {
  max-width: 65ch;
}

.bloque__interior--texto p {
  font-size: 1.125rem;
}

.bloque h2 {
  margin-bottom: 1.5rem;
}

.direccion {
  font-size: 1.25rem;
}

/* Lista de lo que venden: una línea por producto, con filetes */
.lista-filetes {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--verde);
}

.lista-filetes li,
.lista-filetes > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--piedra-clara);
  font-size: 1.125rem;
}

.lista-filetes dt {
  font-weight: 600;
}

.lista-filetes dd {
  margin: 0.25rem 0 0;
  color: var(--piedra-oscura);
  font-size: 1.0625rem;
}

@media (min-width: 700px) {
  .lista-filetes > div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2rem;
  }

  .lista-filetes dd {
    margin-top: 0;
  }
}

/* Dos fotos seguidas (Empresa y Productos) */
.dos-fotos {
  display: grid;
  gap: 16px;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.dos-fotos img {
  width: 100%;
}

@media (min-width: 700px) {
  .dos-fotos {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Texto y foto de ambiente lado a lado (desde el 2026-11-06: fotos de Pexels de azulejos actuales, que pidió el
   usuario). En el móvil, la foto debajo del texto; en el ordenador, a la derecha (o a la izquierda en --inverso) */
.partido {
  display: grid;
  gap: 2rem;
}

.partido__texto {
  max-width: 65ch;
}

.partido__texto p {
  font-size: 1.125rem;
}

.partido__texto > :last-child {
  margin-bottom: 0;
}

.partido__foto {
  --proporcion: 1;
}

.partido__foto img {
  width: 100%;
  aspect-ratio: var(--proporcion);
  object-fit: cover;
}

.partido--cierre {
  margin-top: 2.5rem;
}

@media (min-width: 600px) {
  .partido__foto {
    --proporcion: 3 / 2;
  }
}

@media (min-width: 860px) {
  .partido {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }

  .partido--inverso {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .partido--inverso .partido__foto {
    order: -1;
  }

  .partido__foto {
    --proporcion: 4 / 5;
  }
}

/* (después de los @media, para que mande) */
.partido__foto--apaisada {
  --proporcion: 5 / 4;
}

.partido__foto--abajo img {
  object-position: 50% 85%;
}

/* Banda de foto a todo el ancho del contenido (Productos) */
.banda-foto {
  margin-block: 2rem 2.5rem;
}

.banda-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 700px) {
  .banda-foto img {
    aspect-ratio: 21 / 9;
  }
}

/* ---------- La exposición: mosaico asimétrico con aire ---------- */

.mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mosaico a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--piedra-clara);
}

.mosaico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaico a:hover img {
  opacity: 0.92;
}

@media (min-width: 700px) {
  .mosaico {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }

  .mosaico__foto--ancha a {
    grid-column: span 4;
    aspect-ratio: 3 / 2;
  }

  .mosaico__foto--alta a {
    grid-column: span 2;
    aspect-ratio: 2 / 3;
  }

  .mosaico__foto--media a {
    grid-column: span 3;
    aspect-ratio: 3 / 2;
  }

  .mosaico__foto--ancha,
  .mosaico__foto--media {
    display: contents;
  }

  .mosaico__foto--alta {
    display: contents;
  }
}

/* Visor de fotos */
.visor {
  width: min(94vw, 1200px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  background: transparent;
  border: 0;
}

.visor::backdrop {
  background: rgba(26, 23, 20, 0.92);
}

.visor__marco img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 64px);
  margin-inline: auto;
  object-fit: contain;
}

.visor__botones {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.visor button {
  min-height: 44px;
  padding: 0 0.75rem;
  color: var(--galleta);
  font: 600 1rem var(--sans);
  background: none;
  border: 0;
  cursor: pointer;
}

.visor button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Contacto ---------- */

.contacto {
  display: grid;
  gap: 2.5rem;
}

.datos {
  margin: 0;
}

.datos > div + div {
  margin-top: 1.25rem;
}

.datos dt {
  color: var(--piedra-oscura);
  font-weight: 600;
}

.datos dd {
  margin: 0.15rem 0 0;
  font-size: 1.125rem;
}

@media (min-width: 860px) {
  .contacto {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 48px;
  }
}

/* Mapa: el plano propio (SVG con datos de OpenStreetMap, sin Google ni cookies) y, al pulsar, el mapa de Google */
.mapa {
  display: flex;
  flex-direction: column;
}

.mapa__marco {
  position: relative;
  aspect-ratio: 1000 / 750;
  overflow: hidden;
  background: var(--blanco-roto);
  border: 1px solid var(--piedra-clara);
}

.mapa__credito {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 14px 10px;
  color: var(--piedra-oscura);
  background: rgba(255, 250, 240, 0.9);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.mapa__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* «Ver mapa de Google», a todo el ancho y centrado en altura entre el plano y el pie: la sección no lleva aire abajo y
   el botón ocupa lo que queda de la columna, con el mismo aire encima y debajo */
.bloque--mapa {
  padding-bottom: 0;
}

.mapa__acciones {
  display: flex;
  flex: 1;
  align-items: center;
  margin: 0;
  padding-block: var(--aire-mapa);
}

.mapa__acciones .boton {
  width: 100%;
}

.mapa__acciones noscript {
  flex: 1; /* sin JavaScript, el enlace a Google Maps ocupa el sitio del botón */
}

@media (max-width: 599.98px) {
  .mapa__marco {
    aspect-ratio: 1;
  }

  .mapa__marco .plano {
    width: 170%;
    max-width: none;
    margin: 0.0% 0 0 -60.4%;
  }

  .mapa__credito {
    right: auto;
    left: 0;
  }

  .plano__solo-escritorio {
    display: none;
  }
}

/* Plano de situación (herramientas/mapa.py) */
.plano {
  display: block;
  width: 100%;
  height: auto;
}

.plano__parque {
  fill: #e3e8d6;
}

.plano__agua {
  fill: #dbe4e4;
}

.plano__acequia {
  fill: none;
  stroke: #c9d8d8;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plano__tren {
  fill: none;
  stroke: #b8b0a6;
  stroke-width: 3;
  stroke-dasharray: 10 6;
}

.plano__calle {
  fill: none;
  stroke: #e2d9cd;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plano__calle--peatonal {
  stroke-width: 1.8;
  stroke-dasharray: 3 5;
}

.plano__calle--principal {
  stroke: #c4b8a8;
  stroke-width: 5;
}

.plano text {
  paint-order: stroke;
  stroke: var(--blanco-roto);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.plano__rotulo {
  fill: var(--piedra-oscura);
  font: 400 22px var(--sans);
}

.plano__tienda circle {
  fill: var(--verde);
  stroke: #ffffff;
  stroke-width: 3;
}

.plano__tienda .plano__tienda-centro {
  fill: #ffffff;
  stroke: none;
}

.plano__guia {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
}

.plano__etiqueta {
  fill: #ffffff;
  stroke: var(--tinta);
  stroke-width: 1.5;
}

.plano__nombre {
  fill: var(--tinta);
  font: 700 34px var(--serif);
}

.plano__dato {
  fill: var(--piedra-oscura);
  font: 400 22px var(--sans);
}

.plano__escala path,
.plano__norte path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
}

.plano__escala text,
.plano__norte text {
  fill: var(--tinta);
  font: 400 20px var(--sans);
}

/* ---------- Páginas legales y 404 ---------- */

.legal {
  max-width: 65ch;
  margin-inline: auto;
  padding: var(--seccion) var(--margen);
}

.legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.375rem;
}

.ficha-legal {
  margin: 0 0 1rem;
}

.ficha-legal > div {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--piedra-clara);
}

.ficha-legal dt {
  color: var(--piedra-oscura);
  font-weight: 600;
}

.ficha-legal dd {
  margin: 0;
}

.pendiente {
  padding: 0 0.3em;
  color: var(--piedra-oscura);
  border: 1px dashed var(--piedra);
}

/* ---------- Pie ---------- */

.pie {
  padding: clamp(40px, 6vw, 72px) var(--margen) 96px;
  color: var(--galleta);
  background: var(--verde); /* el verde del logo, con el crema encima (6,8:1) */
  font-size: 1rem;
  line-height: 1.6;
}

.pie__interior {
  display: grid;
  gap: 2rem;
  max-width: var(--ancho);
  margin-inline: auto;
}

.pie p {
  margin: 0;
}

.pie__nombre {
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
}

.pie a {
  display: inline-block;
  padding-block: 0.6rem; /* zona táctil de 44 px o más; el margen negativo deja el pie como estaba */
  margin-block: -0.2rem;
  color: var(--galleta);
  text-decoration: none;
}

.pie a:hover {
  color: var(--amarillo);
}

.pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie__copia {
  margin-top: 1rem;
  color: var(--crema-pie);
}

@media (min-width: 860px) {
  .pie {
    padding-bottom: clamp(40px, 6vw, 72px);
  }

  .pie__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

/* ---------- Barra fija «Llamar» en el móvil ---------- */

.llamar-fijo {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  color: var(--verde); /* como el redondel de Tot Cerámica: verde sobre amarillo (5,4:1) */
  font-weight: 600;
  background: var(--amarillo);
  border-top: 1px solid var(--verde);
  text-decoration: none;
}

.llamar-fijo:hover {
  color: var(--verde-oscuro);
  background: var(--amarillo);
}

@media (min-width: 860px) {
  .llamar-fijo {
    display: none;
  }
}