/* =========================================================
   TIPOGRAFÍAS ALOJADAS EN EL PROPIO SERVIDOR
   (no se conecta con Google: sin transferencia de IP a EE. UU.)
   ========================================================= */
@font-face{
  font-family:'Bodoni Moda'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/bodoni-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bodoni Moda'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/bodoni-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cabinet Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/cabinet-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Cabinet Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/cabinet-medium.woff2') format('woff2');
}
@font-face{
  font-family:'Cabinet Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/cabinet-bold.woff2') format('woff2');
}

/* =========================================================
   Catalina Eugenio — Psicóloga en Lepe
   Sistema visual: crema de marca + Bodoni Moda + Nunito Sans
   ========================================================= */

:root{
  /* Escala tonal de la crema de marca */
  --cream-050:#FFF9E6;
  --cream-100:#FFF3D4;
  --cream-200:#FAE9AC;   /* crema de marca */
  --cream-300:#F2DC95;
  --cream-400:#E8CD79;

  /* Tintas */
  --ink:#14120E;
  --ink-700:#3A342A;
  --ink-500:#6B6151;
  --bronze:#8A6B33;

  --white:#fff;
  --line:rgba(20,18,14,.10);
  --line-strong:rgba(20,18,14,.18);

  --shadow-sm:0 1px 2px rgba(20,18,14,.06), 0 4px 12px rgba(20,18,14,.05);
  --shadow-md:0 4px 10px rgba(20,18,14,.07), 0 18px 40px rgba(20,18,14,.09);
  --shadow-lg:0 10px 24px rgba(20,18,14,.10), 0 34px 70px rgba(20,18,14,.14);

  --serif:'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --sans:'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --gutter:clamp(20px, 5vw, 40px);
  --measure:64ch;
  --radius:22px;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream-100);
  font-size:clamp(16px, .5vw + 15px, 17.5px);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Grano sutil sobre toda la página: da tacto de papel */
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%; display:block; height:auto;}
picture{display:contents;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:650;
  font-variation-settings:'opsz' 18;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
}

::selection{background:var(--ink); color:var(--cream-200);}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px;}

.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--gutter);}

/* =========================================================
   HEADER
   ========================================================= */
header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream-200) 88%, transparent);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(20,18,14,.04), 0 10px 30px -18px rgba(20,18,14,.35);
}

.nav{
  max-width:1180px; margin-inline:auto;
  padding:clamp(16px,2.2vw,24px) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .35s var(--ease);
}
header.scrolled .nav{padding-block:14px;}

.brand{
  font-family:var(--serif);
  font-size:clamp(1.1rem, 1.5vw + .6rem, 1.6rem);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:opacity .25s var(--ease);
}
.brand:hover{opacity:.72;}

.links{
  display:flex; align-items:center; gap:clamp(18px,2.2vw,30px);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.links > li{list-style:none; position:relative;}

.links a{position:relative; padding-block:4px; transition:color .25s var(--ease);}
.links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.links a:hover::after, .links a.active::after{transform:scaleX(1); transform-origin:left;}
.links a.pill::after{display:none;}

.has-sub > a::after{content:'';}
.chev{display:inline-block; margin-left:5px; font-size:.62em; transform:translateY(-1px); opacity:.6;}

.submenu{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translate(-50%, 8px);
  background:var(--cream-050);
  border:1px solid var(--line);
  border-radius:16px; padding:10px;
  min-width:236px;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease-out), visibility .28s;
}
.submenu::before{
  content:''; position:absolute; top:-14px; left:0; right:0; height:14px;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.submenu li{list-style:none;}
.submenu a{
  display:block; padding:10px 14px; border-radius:10px;
  text-transform:none; letter-spacing:.01em; font-size:.92rem; font-weight:400;
  transition:background .22s var(--ease), padding-left .22s var(--ease);
}
.submenu a::after{display:none;}
.submenu a:hover{background:var(--cream-200); padding-left:19px;}

.pill{
  background:var(--ink); color:var(--cream-100);
  border-radius:999px; padding:12px 24px;
  font-size:.75rem; letter-spacing:.13em; white-space:nowrap; font-weight:600;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), background .3s var(--ease);
}
.pill:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); background:#241f18;}

.menu-toggle{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
  position:relative; z-index:120; border-radius:10px;
}
.menu-toggle span{
  display:block; width:22px; height:1.5px; background:var(--ink); border-radius:2px;
  position:relative; transition:background .2s var(--ease);
}
.menu-toggle span::before, .menu-toggle span::after{
  content:''; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease-out), top .25s var(--ease);
}
.menu-toggle span::before{top:-7px;}
.menu-toggle span::after{top:7px;}
.menu-toggle[aria-expanded="true"] span{background:transparent;}
.menu-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg);}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--cream-100);
  position:relative; display:inline-flex; align-items:center; gap:12px;
  background:var(--btn-bg); color:var(--btn-fg);
  padding:16px 34px; border-radius:999px;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  border:1px solid var(--btn-bg); cursor:pointer;
  box-shadow:0 1px 1px rgba(255,255,255,.08) inset, var(--shadow-sm);
  overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background .35s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.16) 42%, transparent 64%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn:hover::before{transform:translateX(120%);}
.btn .arrow{
  display:inline-block; transition:transform .4s var(--ease-out);
}
.btn:hover{transform:translateY(-3px); box-shadow:0 1px 1px rgba(255,255,255,.1) inset, var(--shadow-lg); background:#241f18;}
.btn:hover .arrow{transform:translateX(5px);}
.btn:active{transform:translateY(-1px) scale(.98);}

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  border-color:var(--line-strong); box-shadow:none;
}
.btn--ghost::before{display:none;}
.btn--ghost:hover{background:var(--ink); color:var(--cream-100); border-color:var(--ink); box-shadow:var(--shadow-md);}

/* =========================================================
   SECCIONES
   ========================================================= */
section{position:relative; padding-block:clamp(64px, 9vw, 130px);}
.cream{background:
  radial-gradient(120% 160% at 12% -20%, rgba(255,255,255,.55), transparent 55%),
  radial-gradient(90% 120% at 100% 120%, var(--cream-300), transparent 60%),
  var(--cream-200);
}
.light{background:
  radial-gradient(110% 150% at 88% -15%, rgba(255,255,255,.6), transparent 55%),
  var(--cream-100);
}
.pale{background:
  radial-gradient(110% 150% at 10% -15%, rgba(255,255,255,.7), transparent 55%),
  var(--cream-050);
}

/* Transición suave entre bandas de color */
.fade-top::before{
  content:''; position:absolute; inset:0 0 auto 0; height:120px;
  background:linear-gradient(to bottom, rgba(255,249,230,.55), transparent);
  pointer-events:none;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:18px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:linear-gradient(90deg, transparent, currentColor);}
.center .eyebrow::after{content:''; width:26px; height:1px; background:currentColor; opacity:.55;}

.sec-title{
  font-size:clamp(2rem, 3.6vw + .8rem, 3.6rem);
  margin-bottom:24px;
}
.sec-title.upper{text-transform:uppercase; letter-spacing:.005em;}
.sec-title.display{font-size:clamp(2.6rem, 6vw + .6rem, 5.2rem); line-height:.98;}

.lead{
  color:var(--ink-700); margin-bottom:20px;
  font-size:clamp(1rem, .35vw + .94rem, 1.1rem);
  max-width:var(--measure);
}
.lead strong{color:var(--ink); font-weight:700;}
.lead:last-of-type{margin-bottom:34px;}

.center{text-align:center;}
.center .lead{margin-inline:auto;}
.center .eyebrow{justify-content:center;}

/* =========================================================
   BLOQUES IMAGEN + TEXTO
   ========================================================= */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px, 6vw, 84px); align-items:center;
}
.split.reverse .txt{order:2;}

.figure{position:relative;}
/* Marco desplazado: detalle editorial discreto */
.figure::after{
  content:''; position:absolute; inset:18px -18px -18px 18px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  z-index:-1; pointer-events:none;
}
.figure.arch-frame::after{border-radius:260px 260px var(--radius) var(--radius);}

/* Resplandor cálido difuso: separa la fotografía del fondo, da profundidad */
.figure::before{
  content:''; position:absolute; z-index:-2; pointer-events:none;
  inset:8%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(138,107,51,.34), rgba(138,107,51,0) 72%);
  filter:blur(28px);
  opacity:.8;
}

.arch{
  border-radius:clamp(140px,22vw,270px) clamp(140px,22vw,270px) var(--radius) var(--radius);
  object-fit:cover; aspect-ratio:4/5; width:100%;
  box-shadow:var(--shadow-md);
}
.rounded{
  border-radius:var(--radius); object-fit:cover; aspect-ratio:4/5; width:100%;
  box-shadow:var(--shadow-md);
}
.rounded-wide{
  border-radius:var(--radius); object-fit:cover; aspect-ratio:3/2; width:100%;
  box-shadow:var(--shadow-md);
}

/* =========================================================
   TARJETAS DE SERVICIO
   ========================================================= */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px);}
.cards.three{grid-template-columns:repeat(3,1fr);}

.card{
  position:relative; display:block; overflow:hidden;
  border-radius:clamp(90px,13vw,160px) 18px clamp(90px,13vw,160px) 18px;
  aspect-ratio:3/2; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.cards.three .card{aspect-ratio:4/3; border-radius:clamp(70px,10vw,120px) 16px clamp(70px,10vw,120px) 16px;}

.card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out), filter .5s var(--ease);
}
.card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(58,38,8,.30) 0%, rgba(38,25,5,.52) 100%);
  transition:opacity .45s var(--ease);
}
.card .card-label{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px; text-align:center;
}
.card .card-label span{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.3rem, 1.7vw + .7rem, 2.1rem);
  color:var(--white); letter-spacing:.005em;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.card .card-label em{
  font-style:normal; font-family:var(--sans);
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-200);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .45s var(--ease-out);
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.card:hover img{transform:scale(1.07);}
.card:hover::after{opacity:.86;}
.card:hover .card-label em{opacity:1; transform:translateY(0);}

/* =========================================================
   GALERÍA
   ========================================================= */
.gallery-wrap{position:relative;}
.gallery{
  --gal-gap:clamp(12px,1.6vw,20px);
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2*var(--gal-gap)) / 3);
  gap:var(--gal-gap);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  padding-bottom:2px;
}
.gallery::-webkit-scrollbar{display:none;}
.gallery button{
  border:0; padding:0; background:none; cursor:zoom-in; display:block;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.gallery button img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.gallery button:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.gallery button:hover img{transform:scale(1.06);}
/* Composición: dos piezas grandes, cuatro medianas */
.gallery button{aspect-ratio:4/3; scroll-snap-align:start;}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:600;
  background:rgba(14,12,9,.94);
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{
  max-width:100%; max-height:88vh; border-radius:14px; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.97); transition:transform .4s var(--ease-out);
}
.lightbox.open img{transform:scale(1);}
.lightbox button{
  position:absolute; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; line-height:1;
  backdrop-filter:blur(8px); transition:background .25s var(--ease), transform .25s var(--ease-out);
}
.lightbox button:hover{background:rgba(255,255,255,.22); transform:scale(1.06);}
.lb-close{top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px);}
.lb-prev{left:clamp(10px,2.5vw,28px);}
.lb-next{right:clamp(10px,2.5vw,28px);}

/* Al abrir el lightbox, se retira todo lo demás */
body.lb-open header, body.lb-open .wa-float, body.lb-open .pv-bar{
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}

/* =========================================================
   FORMULARIO
   ========================================================= */
form{display:flex; flex-direction:column; gap:4px; max-width:540px;}
.field{position:relative; margin-top:22px;}
.field label{
  display:block; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-500); margin-bottom:8px;
}
.field input, .field textarea{
  width:100%; padding:15px 18px;
  border:1px solid var(--line-strong); border-radius:14px;
  background:var(--cream-050);
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.cream .field input, .cream .field textarea{background:var(--cream-050);}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-500); opacity:.55;}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 4px rgba(20,18,14,.07);
  background:var(--white);
}
.field textarea{min-height:140px; resize:vertical;}
form .btn{margin-top:30px; align-self:flex-start;}

.contact-alt{
  margin-top:30px; padding-top:26px; border-top:1px solid var(--line);
  font-size:.95rem; color:var(--ink-700);
}
.contact-alt a{font-weight:700; border-bottom:1px solid currentColor; padding-bottom:1px;}

/* =========================================================
   PIE
   ========================================================= */
footer{background:var(--cream-300); border-top:1px solid var(--line); padding-top:clamp(56px,7vw,96px); position:relative;}
.foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:stretch;}
.foot-title{font-size:clamp(1.6rem,2.2vw + .7rem,2.4rem); margin-bottom:0;}
.foot-block{margin-bottom:26px;}
.foot-block h4{
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--bronze); margin-bottom:7px;
}
.foot-block p{font-size:1.02rem; color:var(--ink-700);}
.foot-block a{transition:opacity .2s var(--ease);}
.foot-block a:hover{opacity:.65; text-decoration:underline; text-underline-offset:3px;}

.map{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:var(--cream-300);
  opacity:0; transition:opacity .5s var(--ease);
}
.map.is-active{opacity:1;}
.map-credit{margin-top:14px; font-size:.8rem;}
.map-credit a{
  font-weight:700; letter-spacing:.06em; display:inline-flex; align-items:center; gap:7px;
}
.map-credit a .arrow{transition:transform .35s var(--ease-out); display:inline-block;}
.map-credit a:hover .arrow{transform:translateX(5px);}

.copy{
  margin-top:clamp(44px,6vw,72px); padding-block:26px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-500);
}

/* =========================================================
   BLOG
   ========================================================= */
.empty-note{
  background:var(--cream-050); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(36px,6vw,64px);
  text-align:center; color:var(--ink-700); box-shadow:var(--shadow-sm);
  max-width:720px; margin-inline:auto;
}
.empty-note p{margin-bottom:26px;}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.wa-float{
  position:fixed; right:clamp(16px,2.5vw,26px); bottom:clamp(16px,2.5vw,26px); z-index:200;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.wa-float::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.5); animation:pulse 2.8s ease-out infinite;
}
.wa-float:hover{transform:scale(1.08) translateY(-2px); box-shadow:0 12px 32px rgba(37,211,102,.55);}
.wa-float svg{width:31px; height:31px; fill:#fff; position:relative; z-index:2;}
@keyframes pulse{
  0%{transform:scale(1); opacity:.7;}
  70%{transform:scale(1.45); opacity:0;}
  100%{transform:scale(1.45); opacity:0;}
}

/* =========================================================
   REVELADO AL HACER SCROLL
   ========================================================= */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
.reveal-d1{transition-delay:.09s;}
.reveal-d2{transition-delay:.18s;}
.reveal-d3{transition-delay:.27s;}
.reveal-d4{transition-delay:.36s;}
.reveal-d5{transition-delay:.45s;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .split, .foot-grid{grid-template-columns:1fr; gap:38px;}
  .split.reverse .txt{order:-1;}
  .figure::after{inset:14px -14px -14px 14px;}
  .arch{aspect-ratio:1/1;}
  .cards.three{grid-template-columns:repeat(2,1fr);}

  /* backdrop-filter crea un contenedor para position:fixed — se retira en móvil */
  header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--cream-200);}
  .menu-toggle{display:flex;}
  .links{
    position:fixed; inset:0 0 0 auto; width:min(84vw,360px);
    background:var(--cream-050);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:104px var(--gutter) 48px; gap:6px; overflow-y:auto;
    font-size:.9rem;
    transform:translateX(101%);
    transition:transform .45s var(--ease-out);
    box-shadow:-20px 0 60px rgba(20,18,14,.18);
  }
  .links.open{transform:translateX(0);}
  .links > li{width:100%;}
  .links > li > a{display:block; padding-block:13px;}
  .links a::after{display:none;}
  .chev{display:none;}
  .submenu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background:transparent; border:0; box-shadow:none;
    padding:0 0 10px 16px; min-width:0;
  }
  .submenu a{padding:9px 0; font-size:.86rem; color:var(--ink-700);}
  .submenu a:hover{background:transparent; padding-left:5px;}
  .pill{margin-top:18px; display:inline-block;}
  .nav-backdrop{
    position:fixed; inset:0; z-index:99; background:rgba(20,18,14,.4);
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
    backdrop-filter:blur(2px);
  }
  .nav-backdrop.on{opacity:1; visibility:visible;}
}

@media (max-width:600px){
  .cards, .cards.three{grid-template-columns:1fr;}
  .card{border-radius:80px 14px 80px 14px; aspect-ratio:4/3;}
  .copy{justify-content:center; text-align:center;}
  form .btn{align-self:stretch; justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1; transform:none;}
}

@media print{
  header, .wa-float, .lightbox, .menu-toggle{display:none !important;}
  body{background:#fff;}
}

/* =========================================================
   MAPA — controles propios de zoom
   ========================================================= */
.map-wrap{
  position:relative; aspect-ratio:4/3;
  border-radius:var(--radius); overflow:hidden;
  background:var(--cream-300); box-shadow:var(--shadow-md);
}

.map-zoom{
  position:absolute; right:14px; top:14px; z-index:3;
  display:flex; flex-direction:column; gap:1px;
  border-radius:12px; overflow:hidden;
  box-shadow:0 2px 6px rgba(20,18,14,.2), 0 8px 22px rgba(20,18,14,.18);
}
.map-zoom button{
  width:42px; height:42px; border:0; cursor:pointer;
  background:var(--cream-050); color:var(--ink);
  font-family:var(--sans); font-size:1.35rem; font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.map-zoom button:hover{background:var(--ink); color:var(--cream-100);}
.map-zoom button:active{transform:scale(.94);}
.map-zoom button:disabled{opacity:.4; cursor:default;}
.map-zoom button:disabled:hover{background:var(--cream-050); color:var(--ink);}
.map-zoom button:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}

@media (max-width:600px){
  .map-zoom{right:10px; top:10px;}
  .map-zoom button{width:38px; height:38px; font-size:1.2rem;}
}

/* =========================================================
   BANNER DE COOKIES
   ========================================================= */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:700;
  background:var(--cream-050); border-top:1px solid var(--line-strong);
  box-shadow:0 -10px 40px rgba(20,18,14,.16);
  animation:cookie-in .5s var(--ease-out) both;
}
.cookie-banner[hidden]{display:none;}
@keyframes cookie-in{from{transform:translateY(100%);}to{transform:none;}}
.cookie-inner{
  max-width:1180px; margin-inline:auto; padding:clamp(20px,3vw,28px) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,44px); flex-wrap:wrap;
}
.cookie-txt{flex:1 1 420px;}
.cookie-txt h2{font-size:1.3rem; margin-bottom:8px;}
.cookie-txt p{font-size:.92rem; color:var(--ink-700); margin-bottom:8px; max-width:70ch;}
.cookie-txt a{font-weight:700; border-bottom:1px solid currentColor; font-size:.9rem;}
.cookie-btns{display:flex; gap:12px; flex-wrap:wrap;}
.cookie-btns .btn{padding:14px 26px; font-size:.74rem;}
@media (max-width:560px){
  .cookie-btns{width:100%;}
  .cookie-btns .btn{flex:1 1 auto; justify-content:center;}
}

/* =========================================================
   MAPA BLOQUEADO HASTA EL CONSENTIMIENTO
   ========================================================= */
.map-consent{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:clamp(20px,4vw,36px); text-align:center;
  background:var(--cream-300);
  background-image:linear-gradient(135deg, rgba(255,255,255,.28) 0%, transparent 60%);
}
.map-consent[hidden]{display:none;}
.map-consent p{font-size:.94rem; color:var(--ink-700); max-width:42ch; margin:0;}
.map-consent p strong{font-family:var(--serif); font-size:1.3rem; font-weight:500; color:var(--ink);}
.map-consent .btn{margin-top:6px;}
.map-consent-link{font-size:.8rem; color:var(--ink-500); border-bottom:1px solid currentColor;}
.map-zoom[hidden]{display:none;}

/* =========================================================
   PÁGINAS LEGALES
   ========================================================= */
.legal-hero{padding-bottom:clamp(40px,5vw,60px);}
.legal-hero .lead{max-width:70ch;}
.legal-updated{font-size:.82rem; color:var(--ink-500); margin-top:6px;}
.legal-body{padding-top:clamp(44px,6vw,72px);}
.legal{max-width:820px; margin-inline:auto;}
.legal-block{padding:0 0 clamp(30px,4vw,44px);}
.legal-block + .legal-block{border-top:1px solid var(--line); padding-top:clamp(30px,4vw,44px);}
.legal-block h2{
  font-size:clamp(1.3rem,1.3vw + .95rem,1.7rem); margin-bottom:16px;
  display:flex; gap:14px; align-items:baseline;
}
.legal-num{
  font-family:var(--sans); font-size:.72rem; font-weight:700; color:var(--bronze);
  letter-spacing:.1em; flex:0 0 auto; padding-top:2px;
}
.legal-block p{margin-bottom:14px; color:var(--ink-700);}
.legal-block p:last-child{margin-bottom:0;}
.legal-block strong{color:var(--ink);}
.legal-block a{border-bottom:1px solid var(--line-strong); transition:border-color .2s var(--ease);}
.legal-block a:hover{border-bottom-color:var(--ink);}
.legal-list{list-style:none; margin:0 0 14px; padding:0;}
.legal-list li{
  position:relative; padding-left:22px; margin-bottom:9px; color:var(--ink-700);
}
.legal-list li::before{
  content:''; position:absolute; left:2px; top:.7em;
  width:6px; height:6px; border-radius:50%; background:var(--bronze); opacity:.55;
}
.legal-table{
  width:100%; border-collapse:collapse; margin:6px 0 16px;
  font-size:.9rem; display:block; overflow-x:auto;
}
.legal-table th, .legal-table td{
  border:1px solid var(--line-strong); padding:11px 13px; text-align:left; vertical-align:top;
}
.legal-table th{background:var(--cream-200); font-family:var(--sans); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.08em;}
.legal-table td{color:var(--ink-700);}
.legal-table code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:var(--cream-200); padding:2px 6px; border-radius:5px;
}
.pendiente{
  background:#FFE9A8; border-bottom:2px dashed var(--bronze);
  padding:1px 6px; border-radius:4px; font-weight:700; color:#6B4E12;
}

/* =========================================================
   ENLACES LEGALES DEL PIE
   ========================================================= */
.legal-links{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
  padding-top:clamp(36px,5vw,56px); font-size:.84rem;
}
.legal-links a, .linklike{
  color:var(--ink-700); border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.legal-links a:hover, .linklike:hover{color:var(--ink); border-bottom-color:var(--ink);}
.linklike{background:none; border-width:0 0 1px; padding:0; cursor:pointer; font:inherit;}
.copy{margin-top:22px;}

/* =========================================================
   NOTAS DEL FORMULARIO
   ========================================================= */
.form-note{
  font-size:.84rem; color:var(--ink-500); margin-top:20px; max-width:52ch; line-height:1.6;
}
.form-fallback{
  margin-top:18px; font-size:.88rem; color:var(--ink-700);
  padding:18px 20px; border-radius:14px; background:var(--cream-050); border:1px solid var(--line);
}
.form-fallback[hidden]{display:none;}
.form-fallback a{font-weight:700;}
.fb-title{
  font-family:var(--serif); font-weight:650; font-variation-settings:'opsz' 18;
  font-size:1.02rem; margin:0 0 4px;
}
.fb-text{margin:0 0 14px; color:var(--ink-500); line-height:1.5;}
.fb-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;}
.fb-mail{border-bottom:1px solid currentColor; word-break:break-word;}
.btn--sm{padding:10px 18px; font-size:.82rem;}
[aria-invalid="true"]{border-color:#A33 !important; box-shadow:0 0 0 4px rgba(170,51,51,.10) !important;}

/* =========================================================
   REFINAMIENTO — el arco como motivo de marca
   ========================================================= */

/* Entrada suave al cargar la página */
@keyframes page-in{from{opacity:0;}to{opacity:1;}}
body{animation:page-in .6s var(--ease-out) both;}

/* Transición curvada entre bandas de color: un arco muy abierto */
.light, .pale{
  border-radius:50% 50% 0 0 / clamp(28px,4vw,64px) clamp(28px,4vw,64px) 0 0;
  margin-top:calc(-1 * clamp(28px,4vw,64px));
  position:relative; z-index:2;
}
.light + .cream, .pale + .cream{
  border-radius:50% 50% 0 0 / clamp(28px,4vw,64px) clamp(28px,4vw,64px) 0 0;
  margin-top:calc(-1 * clamp(28px,4vw,64px));
  position:relative; z-index:3;
}
footer{
  border-radius:50% 50% 0 0 / clamp(28px,4vw,64px) clamp(28px,4vw,64px) 0 0;
  margin-top:calc(-1 * clamp(28px,4vw,64px));
  position:relative; z-index:4;
  border-top:0;
}
.fade-top::before{display:none;}

/* Arco decorativo de línea fina, ecos del logotipo */
.arch-motif{position:relative; overflow:hidden;}
.arch-motif::before{
  content:''; position:absolute; pointer-events:none;
  width:min(46vw,520px); aspect-ratio:1/1.45;
  border:1px solid var(--line-strong);
  border-radius:50% 50% 6px 6px / 42% 42% 3% 3%;
  right:-13%; top:-14%;
  opacity:.5;
}
.arch-motif--left::before{right:auto; left:-15%; top:auto; bottom:-18%;}

/* Fotografías con un grado cálido común: unifica tomas distintas */
.arch, .rounded, .rounded-wide, .card img, .gallery img{
  filter:saturate(1.03) contrast(1.02);
}

/* Revelado con un matiz de escala: más orgánico que un simple desplazamiento */
.reveal{
  opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in{opacity:1; transform:none;}

/* Indicador de desplazamiento en la portada */
.scroll-cue{
  display:flex; width:fit-content; align-items:center; gap:12px; margin-top:clamp(28px,4vw,44px);
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-500);
}
.scroll-cue::after{
  content:''; width:46px; height:1px; background:currentColor;
  transform-origin:left; animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{transform:scaleX(.25); opacity:.4;}
  55%{transform:scaleX(1); opacity:1;}
  100%{transform:scaleX(.25); opacity:.4;}
}

/* Lupa al pasar por la galería */
.gallery button{position:relative;}
.gallery button::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:rgba(20,18,14,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF9E6' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16 16l5 5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/38px no-repeat;
  opacity:0; transition:opacity .4s var(--ease);
}
.gallery button:hover::after, .gallery button:focus-visible::after{opacity:1;}

/* Firma manuscrita al cierre de «Conóceme» */
.firma{
  margin-top:clamp(26px,3.5vw,40px); padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px;
}
.firma span{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,1.8vw + .9rem,2.1rem); color:var(--ink);
}
.firma em{
  font-style:normal; font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze);
}

/* Comillas tipográficas para citas destacadas */
.destacado{
  font-family:var(--serif); font-size:clamp(1.3rem,1.6vw + .8rem,1.9rem);
  line-height:1.35; color:var(--ink); max-width:22ch;
  padding-left:26px; border-left:2px solid var(--bronze); margin:clamp(24px,4vw,40px) 0;
}

@media (prefers-reduced-motion:reduce){
  body{animation:none;}
  .scroll-cue::after{animation:none; transform:scaleX(1);}
}

/* =========================================================
   BLOG
   ========================================================= */
.miga{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-500); margin-bottom:20px; font-weight:600;
}
.miga a{border-bottom:1px solid transparent; transition:border-color .2s var(--ease);}
.miga a:hover{border-bottom-color:currentColor;}
.miga span{opacity:.45; margin:0 6px;}

.post-hero{padding-bottom:clamp(40px,5vw,64px);}
.post-hero .sec-title{max-width:20ch; font-size:clamp(1.9rem,3vw + .9rem,3.2rem);}
.post-meta{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bronze); font-weight:700; margin-bottom:22px;
}
.post-entradilla{
  font-family:var(--serif); font-size:clamp(1.15rem,1vw + .95rem,1.5rem);
  line-height:1.5; color:var(--ink); max-width:44ch;
}

.post-body{padding-top:clamp(36px,5vw,60px);}
.post-portada{margin:0 auto clamp(36px,5vw,60px); max-width:900px;}
.post-portada img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius); box-shadow:var(--shadow-md);
}

.post-texto{max-width:680px; margin-inline:auto;}
.post-texto > p:first-of-type::first-letter{
  font-family:var(--serif); font-weight:500; font-size:4.4em; line-height:.78;
  float:left; padding:.03em .09em 0 0; color:var(--bronze);
}
.post-texto h2{
  font-size:clamp(1.4rem,1.4vw + 1rem,1.9rem);
  margin:clamp(34px,4.5vw,52px) 0 14px;
}
.post-texto h3{
  font-size:clamp(1.1rem,.7vw + .95rem,1.3rem);
  margin:26px 0 10px; color:var(--ink);
}
.post-texto p{margin-bottom:17px; color:var(--ink-700);}
.post-texto strong{color:var(--ink);}
.post-texto em{color:var(--ink);}

.post-aviso{
  margin:clamp(30px,4vw,44px) 0; padding:22px 24px;
  background:var(--cream-200); border-left:3px solid var(--bronze);
  border-radius:0 14px 14px 0;
}
.post-aviso p{margin:0; font-size:.95rem; color:var(--ink-700);}

.post-disclaimer{
  margin-top:clamp(30px,4vw,44px); padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.85rem; color:var(--ink-500); font-style:italic;
}

.post-cta{
  max-width:680px; margin:clamp(44px,6vw,72px) auto 0;
  background:var(--cream-200); border-radius:var(--radius);
  padding:clamp(30px,4vw,48px); text-align:center;
}
.post-cta h2{font-size:clamp(1.4rem,1.5vw + 1rem,2rem); margin-bottom:12px;}
.post-cta p{color:var(--ink-700); margin-bottom:24px; max-width:46ch; margin-inline:auto;}
.post-cta .eyebrow{justify-content:center;}
.post-cta .eyebrow::after{content:''; width:26px; height:1px; background:currentColor; opacity:.55;}

.post-firma{
  max-width:680px; margin:clamp(36px,5vw,56px) auto 0;
  display:flex; gap:22px; align-items:flex-start;
  padding:26px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--cream-050);
}
.post-firma img{
  width:82px; height:82px; border-radius:50%; object-fit:cover; flex:0 0 auto;
}
.firma-nombre{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:1.35rem; color:var(--ink);
}
.post-firma em{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); margin:2px 0 9px;
}
.post-firma p{font-size:.92rem; color:var(--ink-700); margin:0;}
.post-firma a{font-weight:700; white-space:nowrap;}

.post-relacionados{max-width:900px; margin:clamp(56px,7vw,88px) auto 0;}
.post-relacionados .sec-title{font-size:clamp(1.5rem,1.6vw + 1rem,2rem); margin-bottom:26px;}

.post-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px);}
.post-grid--index{grid-template-columns:repeat(2,1fr); max-width:1000px; margin-inline:auto;}

.post-card{
  display:block; background:var(--cream-050); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.post-card img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.post-card .post-cat{
  display:inline-block; margin:20px 22px 0;
  font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bronze);
}
.post-card h2, .post-card h3{
  margin:8px 22px 0; font-size:1.2rem; line-height:1.25;
}
.post-card--lg h2{font-size:clamp(1.25rem,1vw + .95rem,1.5rem);}
.post-card p{margin:12px 22px 0; font-size:.92rem; color:var(--ink-700);}
.post-mas{
  display:inline-flex; align-items:center; gap:8px; margin:16px 22px 24px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.post-card h3{margin-bottom:22px;}
.post-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.post-card:hover .post-mas .arrow{transform:translateX(5px);}
.post-mas .arrow{transition:transform .4s var(--ease-out);}

@media (max-width:760px){
  .post-grid, .post-grid--index{grid-template-columns:1fr;}
  .post-firma{flex-direction:column; align-items:center; text-align:center;}
}

/* =========================================================
   BANDA OSCURA — cita destacada, contraste y profundidad
   ========================================================= */
.cream + .band-ink, .light + .band-ink, .pale + .band-ink{
  border-radius:50% 50% 0 0 / clamp(28px,4vw,64px) clamp(28px,4vw,64px) 0 0;
  margin-top:calc(-1 * clamp(28px,4vw,64px));
  position:relative; z-index:5;
}
.band-ink + .cream, .band-ink + .light, .band-ink + .pale{
  border-radius:50% 50% 0 0 / clamp(28px,4vw,64px) clamp(28px,4vw,64px) 0 0;
  margin-top:calc(-1 * clamp(28px,4vw,64px));
  position:relative; z-index:6;
}
.band-ink{
  background:
    radial-gradient(80% 140% at 85% 0%, rgba(138,107,51,.30), transparent 60%),
    radial-gradient(70% 120% at 10% 100%, rgba(138,107,51,.16), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, #1c1911 100%);
  color:var(--cream-100);
  overflow:hidden;
}
.band-ink .wrap{position:relative; z-index:1;}
.band-ink::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-ink .eyebrow{color:var(--cream-300);}
.quote-mark{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(4rem,9vw,8rem); line-height:1; color:var(--bronze);
  opacity:.85; margin-bottom:-.28em; display:block;
}
.quote-band{max-width:920px; margin-inline:auto; text-align:center;}
.quote-band blockquote{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1.5rem,2.6vw + .8rem,2.7rem); line-height:1.28;
  letter-spacing:-.01em; color:var(--cream-050); text-wrap:balance;
}
.quote-band .firma{border-top-color:rgba(255,249,230,.16); align-items:center; margin-top:clamp(30px,4vw,46px);}
.quote-band .firma span{color:var(--cream-100);}

/* =========================================================
   MICROINTERACCIONES — inclinación 3D suave al pasar el ratón
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .tilt{transform-style:preserve-3d; will-change:transform; transition:transform .35s var(--ease-out);}
  .tilt img, .tilt .card, .card.tilt{transition:transform .35s var(--ease-out);}
}
@media (prefers-reduced-motion:reduce){
  .tilt{transition:none !important;}
}

/* ---- Enlace de salto (accesibilidad) ---- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:9999;
  background:var(--ink,#2b2b2b); color:#fff;
  padding:10px 18px; border-radius:999px;
  font-family:var(--sans),system-ui,sans-serif; font-size:.95rem; font-weight:700;
  text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{ top:12px; outline:3px solid #FAE9AC; outline-offset:2px; }
main:focus{ outline:none; }

/* =========================================================
   PIE — fichas de contacto
   ========================================================= */
.foot-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px;
}
.foot-card{
  display:flex; gap:13px; align-items:stretch;
  background:var(--cream-100); border:1px solid var(--line);
  border-radius:16px; padding:16px 16px 15px;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
             background .3s var(--ease), border-color .3s var(--ease);
}
a.foot-card{text-decoration:none; color:inherit;}
a.foot-card:hover{
  transform:translateY(-3px); background:var(--cream-050);
  border-color:var(--line-strong); box-shadow:var(--shadow-md);
}
a.foot-card:active{transform:translateY(-1px);}
.fc-ico{
  flex:0 0 auto; width:36px; height:36px; border-radius:11px;
  background:var(--cream-300); color:var(--bronze);
  display:grid; place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease);
}
a.foot-card:hover .fc-ico{background:var(--ink); color:var(--cream-100);}
.fc-ico svg{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.fc-body{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1;}
.fc-label{
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--bronze);
}
.fc-value{
  font-size:.97rem; color:var(--ink-700); line-height:1.45;
  overflow-wrap:anywhere; font-variant-numeric:tabular-nums;
}
.fc-cta{
  margin-top:auto; padding-top:9px; font-size:.76rem; font-weight:700; letter-spacing:.05em;
  color:var(--ink); display:inline-flex; align-items:center; gap:6px;
}
.fc-cta .arrow{display:inline-block; transition:transform .35s var(--ease-out);}
a.foot-card:hover .fc-cta .arrow{transform:translateX(5px);}
.fc-status{
  margin-top:auto; margin-block-start:auto; padding-top:0; width:max-content; max-width:100%;
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:99px;
  background:var(--white); border:1px solid var(--line);
  font-size:.75rem; font-weight:700; letter-spacing:.04em; color:var(--ink-500);
}
.fc-dot{
  flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--ink-500); transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.fc-status.is-open{color:#3D6130;}
.fc-status.is-open .fc-dot{background:#4E7A3C; box-shadow:0 0 0 3px rgba(78,122,60,.16);}
@media (prefers-reduced-motion: reduce){
  .foot-card, .fc-ico, .fc-cta .arrow{transition:none;}
  a.foot-card:hover{transform:none;}
}

.foot-head{margin-bottom:clamp(26px,4vw,40px);}

.foot-grid > div{min-width:0;}
.foot-grid .foot-cards{height:100%; align-content:start;}
@media (max-width:820px){
  .foot-grid .foot-cards{height:auto; grid-auto-rows:auto;}
}

/* =========================================================
   PIE — tratamiento premium
   ========================================================= */

/* El panel del mapa toma la forma de arco de la marca y descansa
   sobre la fotografía real de la fachada. */
.map-wrap{
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  aspect-ratio:4/3;
}
.map-photo{position:absolute; inset:0; z-index:0;}
.map-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.92) contrast(1.02);
}
.map-consent{
  background:linear-gradient(
    180deg,
    rgba(20,18,14,.30) 0%,
    rgba(20,18,14,.52) 42%,
    rgba(20,18,14,.74) 100%);
  backdrop-filter:blur(1.5px);
  gap:12px;
}
.map-consent p{color:rgba(255,249,230,.86);}
.map-consent p strong{
  color:var(--cream-050); font-size:clamp(1.35rem,1.1vw + 1rem,1.7rem); line-height:1.2;
}
.map-consent .btn{background:var(--cream-100); color:var(--ink); border-color:transparent;}
.map-consent .btn:hover{background:var(--white);}
.map-consent-link{color:rgba(255,249,230,.7);}
.map-consent-link:hover{color:var(--cream-050);}
/* Cuando el mapa ya está aceptado, la foto se retira */
.map-wrap.is-live .map-photo{opacity:0; transition:opacity .5s var(--ease);}

/* Firma editorial */
.foot-sign{
  display:flex; align-items:center; gap:clamp(14px,2.5vw,26px);
  padding-top:clamp(40px,6vw,66px);
}
.foot-sign-name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1;
  letter-spacing:.005em; color:var(--ink); white-space:nowrap;
}
.foot-sign-rule{flex:1; height:1px; background:var(--line-strong); min-width:20px;}
.foot-sign-role{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bronze);
  text-align:right;
}
@media (max-width:700px){
  .foot-sign{flex-direction:column; align-items:flex-start; gap:10px;}
  .foot-sign-rule{width:56px; flex:0 0 auto;}
  .foot-sign-role{text-align:left; letter-spacing:.13em;}
}
.legal-links{padding-top:clamp(26px,4vw,40px);}

/* Fichas: menos caja, más filigrana */
.foot-card{
  background:linear-gradient(160deg, rgba(255,249,230,.92), rgba(255,243,212,.62));
  border-color:rgba(20,18,14,.07);
  padding:18px 18px 17px;
}
a.foot-card:hover{
  background:linear-gradient(160deg, var(--white), var(--cream-050));
}
.fc-ico{
  background:transparent; border:1px solid var(--line-strong);
  border-radius:50%; width:38px; height:38px; color:var(--bronze);
}
a.foot-card:hover .fc-ico{background:var(--ink); border-color:var(--ink); color:var(--cream-100);}

/* Profundidad del pie */
footer::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,249,230,.55), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(232,205,121,.35), transparent 65%);
}
footer > *{position:relative; z-index:1;}
footer.arch-motif::before{display:none;}

@media (prefers-reduced-motion: reduce){
  .map-wrap.is-live .map-photo{transition:none;}
}

.foot-card--wide{grid-column:1/-1;}
@media (max-width:820px){ .foot-card--wide{grid-column:auto;} }

/* =========================================================
   ÁREA TÁCTIL — en pantallas táctiles los enlaces pequeños
   amplían su zona sensible sin alterar la maquetación
   ========================================================= */
@media (pointer:coarse){
  .miga a,
  .legal-links a, .legal-links .linklike,
  .map-consent-link,
  .map-credit a,
  .post-cta a,
  .post-firma a,
  .cookie-txt a,
  .fc-cta,
  .contact-alt a,
  .post-disclaimer a,
  .foot-block a{
    position:relative;
  }
  .miga a::after,
  .legal-links a::after, .legal-links .linklike::after,
  .map-consent-link::after,
  .map-credit a::after,
  .post-cta a::after,
  .post-firma a::after,
  .cookie-txt a::after,
  .contact-alt a::after,
  .post-disclaimer a::after,
  .foot-block a::after{
    content:''; position:absolute; left:-6px; right:-6px;
    top:50%; height:44px; transform:translateY(-50%);
  }
  .miga{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;}
  .legal-links{gap:16px 26px;}
}


/* Imágenes en móvil: menos altas, para que no ocupen la pantalla entera */
@media (max-width:600px){
  .rounded{aspect-ratio:5/4; max-height:44vh;}
  .arch{aspect-ratio:4/3.6; max-height:46vh;}
  .rounded-wide{aspect-ratio:3/2; max-height:38vh;}
  .figure::after{inset:11px -11px -11px 11px;}
  /* el texto siempre antes que la foto, para que no se junten dos imágenes */
  .split.reverse .txt{order:-1;}
}

/* =========================================================
   GALERÍA — carrusel de tres en tres
   ========================================================= */
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--cream-050); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(20,18,14,.16), 0 10px 26px rgba(20,18,14,.16);
  transition:background .25s var(--ease), color .25s var(--ease),
             opacity .25s var(--ease), transform .25s var(--ease-out);
}
.gal-nav svg{width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.gal-nav:hover{background:var(--ink); color:var(--cream-100);}
.gal-nav:disabled{opacity:0; pointer-events:none;}
.gal-prev{left:-14px;}
.gal-next{right:-14px;}
.gal-nav:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

@media (max-width:960px){
  .gallery{grid-auto-columns:calc((100% - var(--gal-gap)) / 2);}
  .gal-prev{left:6px;}
  .gal-next{right:6px;}
}
@media (max-width:600px){
  .gallery{grid-auto-columns:82%;}
  .gal-nav{width:40px; height:40px;}
}
@media (prefers-reduced-motion:reduce){
  .gallery{scroll-behavior:auto;}
}

/* =========================================================
   HERO — jerarquía reforzada
   ========================================================= */
.hero-sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,1.4vw + .9rem,1.8rem);
  color:var(--ink-700); margin:-6px 0 16px;
}
.hero-trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bronze);
  margin-bottom:22px; font-variant-numeric:tabular-nums;
}
.hero-trust::before{
  content:''; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:currentColor;
}
.btn--lg{padding:19px 42px; font-size:.82rem; letter-spacing:.16em;}

/* =========================================================
   TEXTURA DE GRANO (muy sutil, sobre toda la web)
   ========================================================= */
.grain-overlay{
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:180px 180px;
}
@media print{.grain-overlay{display:none;}}