@font-face { font-family: 'Fraunces'; src: url('/fuentes/fraunces.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fuentes/fraunces-italica.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fuentes/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --papel: #fbf7f1;
  --crema: #f2e9dc;
  --arena: #e4d5c0;
  --nogal: #2a1d15;
  --nogal-2: #3b2a1f;
  --texto: #2a1d15;
  --texto-suave: #5e4b3d;
  --roble: #9a5524;
  --roble-claro: #d79b62;
  --verde-wa: #1b7a43;
  --radio: 14px;
  --sombra: 0 1px 2px rgb(42 29 21 / .06), 0 8px 24px rgb(42 29 21 / .08);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 1.0625rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--roble); text-underline-offset: 3px; }
a:hover { color: var(--nogal); }
:focus-visible { outline: 3px solid var(--roble); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--nogal); font-variation-settings: 'opsz' 96; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
address { font-style: normal; }
ul, ol { padding: 0; }
svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; background: var(--nogal); color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 100; }
.saltar:focus { top: 1rem; }
.envoltura { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgb(251 247 241 / .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(42 29 21 / .08); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--nogal); }
.marca__sello { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--nogal); color: var(--roble-claro); font: italic 600 1.45rem/1 var(--serif); box-shadow: inset 0 0 0 3px var(--nogal), inset 0 0 0 4px var(--roble-claro); }
.marca__texto { font: 600 1.18rem/1.1 var(--serif); }
.marca__pre { display: block; font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--roble); margin-bottom: 3px; }
.menu ul { display: flex; gap: .3rem; list-style: none; margin: 0; }
.menu { display: flex; align-items: center; gap: 1.2rem; }
.menu ul a { display: block; padding: .5rem .8rem; border-radius: 8px; text-decoration: none; color: var(--texto); font-weight: 500; }
.menu ul a:hover { background: var(--crema); }
.menu ul a[aria-current] { color: var(--roble); box-shadow: inset 0 -2px 0 var(--roble); border-radius: 0; }
.menu-boton { display: none; }

@media (max-width: 859px) {
  .menu-boton { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 10px; background: var(--crema); cursor: pointer; }
  .menu-boton__lineas, .menu-boton__lineas::before, .menu-boton__lineas::after { display: block; width: 20px; height: 2px; background: var(--nogal); position: relative; transition: transform .2s, background .2s; }
  .menu-boton__lineas::before, .menu-boton__lineas::after { content: ''; position: absolute; left: 0; }
  .menu-boton__lineas::before { top: -6px; }
  .menu-boton__lineas::after { top: 6px; }
  .menu-boton[aria-expanded='true'] .menu-boton__lineas { background: transparent; }
  .menu-boton[aria-expanded='true'] .menu-boton__lineas::before { transform: translateY(6px) rotate(45deg); }
  .menu-boton[aria-expanded='true'] .menu-boton__lineas::after { transform: translateY(-6px) rotate(-45deg); }
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 1rem 16px 1.4rem; background: var(--papel); border-bottom: 1px solid var(--arena); box-shadow: var(--sombra); display: none; }
  .menu.abierto { display: flex; }
  .menu ul { flex-direction: column; }
  .menu ul a { padding: .85rem .6rem; font-size: 1.1rem; border-bottom: 1px solid var(--crema); border-radius: 0; }
  .menu ul a[aria-current] { box-shadow: inset 3px 0 0 var(--roble); }
}

/* Botones */
.botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.botones--centro { justify-content: center; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .8rem 1.4rem; border-radius: 999px; background: var(--nogal); color: #fff; font-weight: 600; text-decoration: none; border: 2px solid var(--nogal); transition: transform .15s, background .15s; }
.boton:hover { background: var(--roble); border-color: var(--roble); color: #fff; transform: translateY(-1px); }
.boton--borde { background: transparent; color: var(--nogal); }
.boton--borde:hover { background: var(--nogal); border-color: var(--nogal); }
.boton--claro { background: #fff; color: var(--nogal); border-color: #fff; }
.boton--claro:hover { background: var(--crema); border-color: var(--crema); color: var(--nogal); }
.boton--wa { background: var(--verde-wa); border-color: var(--verde-wa); }
.boton--wa:hover { background: #145f34; border-color: #145f34; }
.boton--pequeno { min-height: 42px; padding: .45rem 1rem; font-size: .95rem; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--roble); text-decoration: none; }
.enlace-flecha svg { transition: transform .2s; }
a:hover .enlace-flecha svg, .enlace-flecha:hover svg { transform: translateX(4px); }

.antetitulo { font: 600 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--roble); margin-bottom: .9rem; }
.entradilla { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--texto-suave); max-width: 40em; }

/* Portada */
.portada { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); background: radial-gradient(ellipse at 85% 10%, var(--crema), transparent 60%); overflow: hidden; }
.portada__rejilla { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.portada h1 em { font-style: italic; font-weight: 500; color: var(--roble); }
.datos-clave { display: flex; flex-wrap: wrap; gap: 1.5rem 2.4rem; list-style: none; margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--arena); }
.datos-clave strong { display: block; font: 600 2rem/1 var(--serif); color: var(--nogal); }
.datos-clave span { font-size: .9rem; color: var(--texto-suave); }
@media (max-width: 479px) { .datos-clave { gap: 1rem 1.3rem; } .datos-clave strong { font-size: 1.6rem; } .datos-clave span { font-size: .8rem; } }
.portada__mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / 1.02; }
.portada__mosaico figure { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.portada__mosaico img { width: 100%; height: 100%; object-fit: cover; }
.portada__mosaico .m1 { grid-row: span 2; }
.portada__mosaico .m4 { display: none; }
@media (min-width: 900px) {
  .portada__rejilla { grid-template-columns: 1.05fr 1fr; }
  .portada__mosaico { grid-template-rows: 1.1fr .9fr 1fr; aspect-ratio: auto; height: 600px; }
  .portada__mosaico .m1 { grid-row: 1 / 3; }
  .portada__mosaico .m2 { grid-row: 1 / 2; }
  .portada__mosaico .m3 { grid-row: 2 / 4; }
  .portada__mosaico .m4 { display: block; grid-row: 3 / 4; grid-column: 1; }
}

/* Secciones */
.seccion { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.seccion--pegada { padding-top: 0; }
.seccion--clara { background: var(--crema); }
.seccion--oscura { background: var(--nogal); color: #efe4d6; }
.seccion--oscura h2, .seccion--oscura strong { color: #fff; }
.seccion--oscura .antetitulo { color: var(--roble-claro); }
.seccion__cabeza { max-width: 44rem; margin-bottom: 2.6rem; }
.seccion__cabeza p:last-child { color: var(--texto-suave); }
.seccion__cabeza--fila { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.seccion__cabeza--fila h2 { margin: 0; }

.dos-columnas { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; } .dos-columnas--centro { align-items: center; } }
.foto-marco { margin: 0; border-radius: var(--radio); overflow: hidden; }
.foto-marco img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }

.pasos { list-style: none; counter-reset: paso; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem; }
.pasos li::before { content: counter(paso); grid-row: span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--roble-claro); color: var(--roble-claro); font: 600 1.1rem/1 var(--serif); }
.pasos span { color: #d9c9b6; }

/* Tarjetas de servicio */
.tarjetas { list-style: none; margin: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tarjeta a { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--radio); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sombra); transition: transform .2s, box-shadow .2s; }
.tarjeta a:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(42 29 21 / .06), 0 18px 40px rgb(42 29 21 / .14); color: inherit; }
.tarjeta__foto { overflow: hidden; }
.tarjeta__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.tarjeta a:hover .tarjeta__foto img { transform: scale(1.04); }
.tarjeta__texto { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__texto p { color: var(--texto-suave); font-size: .98rem; flex: 1; }
.tarjetas--compactas .tarjeta__texto p { display: none; }

/* Galería */
.galeria { list-style: none; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria li[hidden] { display: none; }
.galeria__item { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; background: var(--crema); }
.galeria__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s, filter .3s; }
.galeria__item:hover img { transform: scale(1.05); filter: brightness(1.04); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.filtro { font: 500 .95rem var(--sans); padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid var(--arena); background: #fff; color: var(--texto); cursor: pointer; }
.filtro[aria-pressed='true'] { background: var(--nogal); border-color: var(--nogal); color: #fff; }

.visor { padding: 0; border: 0; background: transparent; max-width: min(94vw, 1000px); max-height: 94vh; overflow: visible; }
.visor::backdrop { background: rgb(20 13 9 / .88); }
.visor img { max-height: 84vh; width: auto; margin: auto; border-radius: 10px; }
.visor__pie { color: #efe4d6; text-align: center; margin: .8rem 0 0; }
.visor__cerrar { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--nogal); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--sombra); }

/* Opiniones */
.opiniones { text-align: center; max-width: 40rem; }
.opiniones__estrellas { color: var(--roble); display: flex; justify-content: center; gap: 4px; margin-bottom: 1rem; }
.opiniones__estrellas svg { width: 26px; height: 26px; }

/* Zona y contacto */
.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.4rem; }
.etiquetas li { background: var(--crema); border-radius: 999px; padding: .35rem .9rem; font-size: .95rem; }
.tarjeta-contacto { background: #fff; border-radius: calc(var(--radio) + 4px); padding: 1.6rem; box-shadow: var(--sombra); display: grid; gap: .4rem; align-content: start; }
.tarjeta-contacto__titulo { font: 600 1.4rem/1.2 var(--serif); margin-bottom: .6rem; }
.fila-contacto { display: flex; align-items: center; gap: 1rem; padding: .9rem; border-radius: 12px; text-decoration: none; color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.fila-contacto:hover { background: var(--crema); color: var(--texto); }
.fila-contacto svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--crema); color: var(--roble); }
.fila-contacto:hover svg { background: #fff; }
.fila-contacto small { display: block; font-weight: 400; font-size: .85rem; color: var(--texto-suave); }
.tarjeta-contacto--grande .fila-contacto { font-size: clamp(1rem, 4.4vw, 1.15rem); }
@media (max-width: 479px) { .tarjeta-contacto { padding: 1rem .6rem; } .fila-contacto { gap: .75rem; } }
.bloque { margin-bottom: 2rem; }
.bloque h2 { font-size: 1.4rem; }
.horario { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; margin: 0; }
.horario dd { margin: 0; }
.nota { font-size: .9rem; color: var(--texto-suave); }

/* Cabecera de página interior */
.cabeza-pagina { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 5vw, 3rem); }
.migas { font-size: .9rem; color: var(--texto-suave); margin-bottom: 1.6rem; }
.migas a { color: var(--texto-suave); }

.ventajas { list-style: none; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ventajas li { background: #fff; border-radius: var(--radio); padding: 1.4rem; border-top: 3px solid var(--roble-claro); box-shadow: var(--sombra); }
.ventajas h2 { font-size: 1.2rem; }
.ventajas p { color: var(--texto-suave); margin: 0; font-size: .98rem; }

/* Llamada a la acción */
.llamada { padding: 0 0 clamp(3.5rem, 8vw, 6rem); }
.llamada__caja { background: linear-gradient(135deg, var(--nogal), var(--nogal-2)); color: #efe4d6; border-radius: 22px; padding: clamp(1.8rem, 5vw, 3.2rem); display: grid; gap: 1rem; align-items: center; }
.llamada__caja h2 { color: #fff; }
.llamada__caja p { margin: 0; }
.llamada__caja .botones { margin-top: 0; }
@media (min-width: 900px) { .llamada__caja { grid-template-columns: 1.4fr 1fr; } .llamada__caja .botones { justify-content: flex-end; } }

/* Textos legales */
.texto-legal { max-width: 46rem; }
.texto-legal h2 { font-size: 1.35rem; margin-top: 2rem; }
.texto-legal ul { padding-left: 1.2rem; }
.texto-legal li { margin-bottom: .35rem; }

/* Pie */
.pie { background: var(--nogal); color: #d9c9b6; padding: 3.5rem 0 1.5rem; font-size: .96rem; }
.pie a { color: #efe4d6; }
.pie a:hover { color: var(--roble-claro); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pie__marca { font: 600 1.35rem/1.2 var(--serif); color: #fff; }
.pie__titulo { font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--roble-claro); }
.pie ul { list-style: none; margin: 0; }
.pie li { margin-bottom: .35rem; }
.pie__redes { display: flex; gap: .6rem; }
.pie__redes a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / .08); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid rgb(255 255 255 / .12); margin-top: 2.5rem; padding-top: 1.3rem; font-size: .88rem; }
.pie__legal p { margin: 0; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* WhatsApp flotante */
.flotante-wa { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--verde-wa); color: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / .25); transition: transform .2s; }
.flotante-wa:hover { transform: scale(1.07); color: #fff; }
.flotante-wa svg { width: 30px; height: 30px; }

/* Aparición suave */
@media (prefers-reduced-motion: no-preference) {
  .js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .aparece.visto { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Logos del Kit Digital */
.kit-digital { background: #fff; padding: 18px 16px 96px; }
.kit-digital img { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto; }