/* =========================================================
   Las Tres Hermanitas — Design System
   ========================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Jost:wght@300;400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Palette "noche cobalto, oro y turquesa": cobalt + gold are the identity, turquoise is the supporting colour, ivory and mist are the light surfaces */
  --color-primary: #3a63d8;
  --color-primary-dark: #14234a;
  --color-primary-light: #bccbf0;
  --color-secondary: #0b7377;
  --color-secondary-light: #d9f0ee;
  --color-accent: #c9a227;
  --color-accent-light: #f5e2a8;
  --color-gold-metallic: #fbf7ee; /* text on the navy header, menu and footer */
  --color-header-accent: #f5e2a8; /* hover / active on the navy header and footer */
  --color-teal: #0f8a8a;
  --color-cobalt: #3a63d8;

  --color-bg: #edf1f8;
  --color-bg-alt: linear-gradient(180deg, #f3f6fc 0%, #e4ebf7 100%);
  --color-bg-deep: #c5d3f0;
  --color-surface: #fbf7ee;

  --color-text: #2a3556;
  --color-text-muted: #5e6a88;
  --color-text-on-dark: #ffffff;
  --color-border: #dde4f0;

  /* Turquoise — flat, for icons, number badges and avatars */
  --gradient-primary: #0f8a8a;
  --gradient-warm: #0f8a8a;
  --gradient-hero: var(--color-bg-alt);

  /* Deep cobalt — CTA banners and deep sections */
  --gradient-deep: linear-gradient(135deg, #0b1f55 0%, #1f46b0 100%);

  /* Night cobalt — header, menus & footer */
  --gradient-button: linear-gradient(135deg, #0b1f55 0%, #123a7d 100%);

  /* Deep turquoise — focus and small accents */
  --color-gold-dark: #0a5f63;

  /* Metallic gold with twin shines near the left and right edges — buttons, with cobalt blue text */
  --gradient-btn: linear-gradient(to right, #4a3510 0%, #f5e2a8 10%, #c9a227 25%, #c9a227 75%, #f5e2a8 90%, #4a3510 100%);
  --color-btn-silver-dark: #4a3510;
  --color-btn-text: #14307a; /* text on gold surfaces: dark cobalt for strong contrast */

  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container-max: 1180px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(10, 24, 64, 0.07);
  --shadow-md: 0 10px 30px rgba(10, 24, 64, 0.12);
  --shadow-lg: 0 20px 50px rgba(10, 24, 64, 0.18);

  --header-height: 78px;
  --transition: 0.28s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #0b1b3f;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#cobalt-star-field{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
}
img{ max-width: 100%; display:block; height:auto; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4,h5{
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-primary-dark);
}
p{ margin: 0 0 1em; }
:focus-visible{
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Typography scale (fluid) ---------- */
h1, .h1{ font-size: clamp(2.4rem, 5vw + 1rem, 4.2rem); }
h2, .h2{ font-size: clamp(1.9rem, 3vw + 1rem, 2.9rem); }
h3, .h3{ font-size: clamp(1.4rem, 1.5vw + 1rem, 1.8rem); }
h4, .h4{ font-size: clamp(1.15rem, 1vw + 1rem, 1.35rem); }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: .9em;
}
.eyebrow::before{
  content:'';
  width: 28px; height: 1px;
  background: var(--color-accent);
  display:inline-block;
}
.lede{
  font-size: clamp(1.05rem, .5vw + 1rem, 1.2rem);
  color: var(--color-text-muted);
  max-width: 60ch;
}
.text-center{ text-align:center; }
.text-center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- Layout ---------- */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.section{
  padding-block: clamp(56px, 8vw, 108px);
}
.section-alt{ background: var(--color-bg-alt); }
.section-deep{
  background: var(--gradient-deep);
  color: var(--color-text-on-dark);
}
#main > section:last-child{ margin-bottom: 56px; }
.section-deep h2, .section-deep h3, .section-deep .eyebrow{ color: var(--color-text-on-dark); }
.section-deep .eyebrow{ color: var(--color-accent-light); }
.section-head{
  max-width: 720px;
  margin: 0 0 3rem;
}
.section-head.text-center{ margin-inline:auto; }
.section:not(.section-alt):not(.section-deep) > .container{
  background: rgba(251,247,238,0.94);
  border-radius: var(--radius-lg);
  padding: 40px clamp(20px, 4vw, 56px);
  box-shadow: var(--shadow-sm);
}

.grid{ display:grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-5{ grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-5{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-5{ grid-template-columns: 1fr; }
}

.divider-orn{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color: var(--color-accent);
  margin: 1.4rem 0;
}
.divider-orn::before, .divider-orn::after{
  content:''; height:1px; width:56px;
  background: linear-gradient(90deg, transparent, var(--color-accent));
}
.divider-orn::after{ background: linear-gradient(90deg, var(--color-accent), transparent); }

/* ---------- Buttons ---------- */
[data-i18n="about.sister1.bookBtn"],
[data-i18n="about.sister2.bookBtn"],
[data-i18n="about.sister3.bookBtn"]{
  width: 190px;
  text-align: center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: .02em;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  min-height: 48px;
  white-space: nowrap;
}
.btn-primary{
  background: var(--gradient-btn);
  color: var(--color-btn-text);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus-visible{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline{
  background: transparent;
  border-color: currentColor;
  color: var(--color-cobalt);
}
.btn-outline:hover, .btn-outline:focus-visible{
  background: var(--gradient-btn);
  color: var(--color-btn-text);
  border-color: var(--color-btn-silver-dark);
}
.section-deep .btn-outline{ color: var(--color-cobalt); }
.section-deep .btn-outline:hover{ background: var(--gradient-btn); color: var(--color-btn-text); border-color: var(--color-btn-silver-dark); }
.btn-whatsapp{
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-whatsapp:hover, .btn-whatsapp:focus-visible{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 20px; min-height: 40px; font-size: .88rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  height: var(--header-height);
  display:flex;
  align-items:center;
  transition: background var(--transition), box-shadow var(--transition), height var(--transition);
  background: var(--gradient-button);
}
.site-header.is-scrolled, .site-header.is-solid{
  box-shadow: var(--shadow-sm);
  height: 68px;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-gold-metallic);
  flex-shrink: 0;
}
.brand img{ height: 68px; width:auto; transition: height var(--transition); }
.site-header.is-scrolled .brand img, .site-header.is-solid .brand img{ height: 58px; }
.brand-name{ line-height:1.1; }
.brand-name small{
  display:block;
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(10, 24, 64, 0.85);
  font-weight: 600;
}

.nav-desktop{
  display:flex;
  align-items:center;
  gap: 6px;
}
.nav-desktop a{
  padding: 10px 16px;
  font-size: .96rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  color: var(--color-gold-metallic);
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.nav-desktop a{ white-space:nowrap; }
/* narrow laptops / tablets in landscape: slightly tighter header so the whole menu fits next to the logo and the buttons */
@media (min-width:1061px) and (max-width:1260px){
  .site-header .container{ gap:10px; }
  .brand{ gap:8px; font-size:1.15rem; }
  .brand img{ height:56px !important; }
  .nav-desktop{ gap:0; }
  .nav-desktop a{ padding:9px 8px; font-size:.88rem; }
  .header-actions{ gap:8px; }
  .lang-switch button{ padding-left:7px; padding-right:7px; }
  .header-actions .btn-sm{ padding-left:14px; padding-right:14px; }
}
.nav-desktop a:hover{ background: rgba(10,24,64,0.12); color: var(--color-header-accent); }
.nav-desktop a.active{ color: var(--color-header-accent); font-weight: 600; }
.nav-desktop a.active::after{
  content:'';
  position:absolute;
  left: 16px; right:16px; bottom: 4px;
  height: 2px;
  background: var(--color-header-accent);
  border-radius: 2px;
}

.nav-dropdown{ position:relative; }
.nav-submenu{
  position:absolute; top: calc(100% + 6px); left: 50%;
  min-width: 270px; padding: 8px;
  display:flex; flex-direction:column; gap:2px;
  background: var(--gradient-button);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(10,24,64,.28);
  opacity:0; visibility:hidden; transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-submenu::before{ content:''; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav-dropdown:hover .nav-submenu, .nav-dropdown:focus-within .nav-submenu{
  opacity:1; visibility:visible; transform: translate(-50%, 0);
}
.nav-desktop .nav-submenu a{ display:block; white-space:nowrap; border-radius: 12px; padding: 10px 16px; }
.nav-desktop .nav-submenu a.active::after{ display:none; }

.header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.lang-switch{
  display:flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow:hidden;
  background: var(--color-surface);
}
.lang-switch button{
  border:0;
  background: transparent;
  padding: 7px 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-gold-metallic);
  transition: background var(--transition), color var(--transition);
}
.lang-switch button.active{
  background: var(--gradient-btn);
  color: var(--color-btn-text);
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--gradient-btn);
  flex-shrink:0;
}
.nav-toggle span{
  width: 20px; height: 2px;
  background: var(--color-btn-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--gradient-button);
  color: var(--color-gold-metallic);
  display:flex;
  flex-direction:column;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 40px;
}
.mobile-menu-close{
  width:46px; height:46px;
  border-radius: 50%;
  border: 1.5px solid rgba(10,24,64,0.4);
  background: transparent;
  color: var(--color-gold-metallic);
  font-size: 1.4rem;
  display:flex; align-items:center; justify-content:center;
}
.mobile-nav{ display:flex; flex-direction:column; gap: 4px; }
.mobile-nav a{
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(10,24,64,0.2);
  color: var(--color-gold-metallic);
}
.mobile-subnav{ display:flex; flex-direction:column; }
.mobile-nav .mobile-subnav a{
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 7px 4px 7px 24px;
}
.mobile-menu-foot{
  margin-top: auto;
  padding-top: 30px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.mobile-lang-switch{
  display:flex;
  gap:8px;
}
.mobile-lang-switch button{
  flex:1;
  border: 1.5px solid rgba(10,24,64,0.4);
  background: #fff;
  color: var(--color-gold-metallic);
  padding: 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .85rem;
}
.mobile-lang-switch button.active{ background: var(--gradient-btn); color: var(--color-btn-text); border-color: transparent; }

body.menu-open{ overflow:hidden; }

@media (max-width: 1060px){
  .nav-desktop{ display:none; }
  .header-actions .lang-switch{ display:none; }
  .header-actions > .btn{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top: calc(var(--header-height) + 56px);
  padding-bottom: 80px;
  background: var(--gradient-hero);
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items:center;
}
.hero-copy h1{ margin-bottom: .35em; }
.hero-copy .lede{ margin-bottom: 1.8em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 14px; }
.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual img{
  width: min(100%, 460px);
  filter: drop-shadow(0 25px 45px rgba(23, 57, 79, 0.25));
  animation: float 7s ease-in-out infinite;
}
.hero-halo{
  position:absolute;
  width: 520px; height: 520px;
  max-width: 90vw; max-height: 90vw;
  border-radius:50%;
  background: radial-gradient(circle, rgba(217,240,238,0.30) 0%, rgba(15,138,138,0.16) 45%, transparent 70%);
  z-index:-1;
}
@keyframes float{
  0%, 100%{ transform: translateY(0px); }
  50%{ transform: translateY(-14px); }
}
.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap: 20px 32px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}
.hero-trust-item{
  display:flex; align-items:center; gap:10px;
  font-size:.88rem; color: var(--color-text-muted); font-weight:500;
}
.hero-trust-item svg{ flex-shrink:0; color: var(--color-accent); }

@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; text-align:center; }
  .hero-copy .lede{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ order:-1; }
  .hero-visual img{ width: min(70%, 320px); }
  .hero-trust{ justify-content:center; }
}

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 60px;
  background: var(--gradient-hero);
  text-align:center;
  position: relative;
  overflow: hidden;
}
.page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image: url('../assets/img/logo-hero.png');
  background-repeat: no-repeat;
  background-position: center 15%;
  background-size: min(70vw, 620px);
  opacity: 0.08;
  pointer-events: none;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero .eyebrow{ justify-content:center; }
.breadcrumbs{
  display:flex; justify-content:center; gap:8px;
  font-size:.85rem; color: var(--color-text-muted); margin-top: 14px;
}
.breadcrumbs a{ color: var(--color-secondary); font-weight:600; }

/* ---------- Cards ---------- */
.card{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
  height:100%;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-icon{
  width: 58px; height:58px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--gradient-warm);
  color: #fff;
  margin-bottom: 18px;
}
.card-icon svg{ width:28px; height:28px; }
.card h3{ margin-bottom: .4em; }
.card p{ color: var(--color-text-muted); margin-bottom: 1.2em; }
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color: var(--color-primary);
  font-size:.92rem;
}
.card-link svg{ transition: transform var(--transition); width:16px; height:16px; }
.card-link:hover svg{ transform: translateX(4px); }

.service-card{ display:flex; flex-direction:column; }
.service-card .btn-outline, .btn-outline.btn-white-outline{ border-color:#fff; color:#fff; }
.service-card .btn-outline:hover, .service-card .btn-outline:focus-visible,
.btn-outline.btn-white-outline:hover, .btn-outline.btn-white-outline:focus-visible{
  background: var(--gradient-btn);
  color: var(--color-btn-text);
  border-color: var(--color-btn-silver-dark);
}

/* Testimonial */
.testi-card{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.testi-stars{ color: var(--color-accent); margin-bottom: 12px; letter-spacing:2px; }
.testi-quote{ font-style:italic; color: var(--color-text); margin-bottom: 18px; }
.testi-who{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:44px; height:44px; border-radius:50%;
  background: var(--gradient-primary);
  color: #fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading); font-weight:700; font-size:1.1rem;
  flex-shrink:0;
}
.testi-name{ font-weight:600; font-size:.94rem; }
.testi-role{ font-size:.8rem; color: var(--color-text-muted); }

/* ---------- About / values ---------- */
.value-item{ display:flex; gap:16px; align-items:flex-start; }
.value-icon{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background: rgba(15,138,138,0.12);
  color: var(--color-gold-dark);
  display:flex; align-items:center; justify-content:center;
}
.value-icon svg{ width:22px; height:22px; }

.sister-card{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  text-align:center;
}
.sister-photo{
  aspect-ratio: 1/1;
  background: var(--gradient-primary);
  display:flex; align-items:center; justify-content:center;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight:700;
}
.sister-body{ padding: 26px 22px; }
.sister-role{ color: var(--color-secondary); font-weight:600; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:.6em; }

/* ---------- Process steps ---------- */
.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; padding-left: 0; }
.step-num{
  width:48px; height:48px; border-radius:50%;
  background: var(--gradient-primary);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading); font-weight:700; font-size:1.3rem;
  margin-bottom: 16px;
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background: var(--gradient-deep);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 64px);
  text-align:center;
  color: var(--color-text-on-dark);
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.16), transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(58,99,216,0.30), transparent 55%);
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2, .cta-banner h3, .cta-banner h4{ color:#ffffff; }
.cta-banner .eyebrow{ color:#f5e2a8; }
.cta-banner .eyebrow::before{ background:#f5e2a8; }
.cta-banner p{ color: rgba(255,255,255,0.88); max-width: 55ch; margin-inline:auto; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top: 1.6em; }

/* ---------- Pricing ---------- */
.price-table{ width:100%; border-collapse: collapse; }
.price-table th, .price-table td{
  text-align:left; padding: 16px 18px; border-bottom: 1px solid var(--color-border);
}
.price-table th{ font-family: var(--font-heading); font-size:1.1rem; color: var(--color-primary-dark); }
.price-table td:last-child, .price-table th:last-child{ text-align:right; font-weight:600; white-space:nowrap; }
.btn-xs{ padding: 6px 16px; min-height: 30px; font-size: .78rem; }
.price-table td:first-child .btn-xs{ width: 210px; }
@media (max-width: 640px){
  .price-table th, .price-table td{ padding: 10px 6px; font-size: .82rem; }
  .price-table th{ font-size: .95rem; }
  .btn-xs{ padding: 5px 8px; min-height: 0; height: 42px; font-size: .68rem; white-space: normal; line-height: 1.15; text-align:center; }
  .price-table td:first-child .btn-xs{ width: 84px; }
}
.price-note{ font-size:.85rem; color: var(--color-text-muted); margin-top: 12px; }
.price-wrap{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  overflow-x:auto;
}
.price-wrap.price-wrap-deep{ background: var(--gradient-deep); border: 0; }
.price-wrap-deep .price-table th{ color: #fff; }
.price-wrap-deep .price-table th, .price-wrap-deep .price-table td{ border-bottom-color: rgba(255,255,255,0.28); color: #fff; }
.price-wrap-deep .price-note{ color: rgba(255,255,255,0.8); }
.pull-quote{
  position:relative; margin: 2.6em 0 .6em; padding: 40px 30px 34px; text-align:center;
  border-radius: 24px; overflow:hidden;
  background: var(--color-bg-alt);
  border: 1px solid rgba(201,162,39,.6);
  box-shadow: 0 16px 38px rgba(10,24,64,.20), inset 0 0 0 6px rgba(255,255,255,.35);
}
.pull-quote::before, .pull-quote::after{
  position:absolute; font-family: var(--font-heading); font-size: 6.2rem; line-height:1;
  color: rgba(201,162,39,.55); pointer-events:none;
}
.pull-quote::before{ content:'\201C'; top:6px; left:20px; }
.pull-quote::after{ content:'\201D'; bottom:-26px; right:20px; }
.pull-quote-icon{ display:block; margin: 0 auto 14px; color:#b98d12; overflow:visible; }
.pull-quote-icon .rip{ transform-origin: 24px 40px; animation: water-ripple 3.4s ease-out infinite; }
.pull-quote-icon .rip2{ animation-delay: 1.1s; }
.pull-quote-icon .twinkle{ transform-box: fill-box; transform-origin: center; animation: star-twinkle 3.2s ease-in-out infinite; }
.pull-quote-icon .twinkle2{ animation-delay: 1.2s; }
.pull-quote-icon .twinkle3{ animation-delay: 2.1s; }
@keyframes star-twinkle{ 0%,100%{ opacity:.35; transform: scale(.8); } 50%{ opacity:1; transform: scale(1.1); } }
@keyframes water-ripple{ 0%{ transform: scale(.55); opacity:0; } 25%{ opacity:.9; } 100%{ transform: scale(1.25); opacity:0; } }
.pull-quote blockquote{
  position:relative; margin:0;
  font-family: var(--font-heading); font-style: italic; font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.3;
  color: var(--color-primary-dark);
  text-wrap: balance;
}
.pull-quote blockquote::after{
  content:''; display:block; width: 96px; height: 2px; margin: 20px auto 0; border-radius: 2px;
  background: var(--gradient-btn);
}
@media (max-width: 640px){
  .pull-quote{ padding: 34px 20px 28px; }
  .pull-quote::before, .pull-quote::after{ font-size: 4.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .pull-quote-icon .rip{ animation: none; opacity:.7; }
  .pull-quote-icon .twinkle{ animation: none; opacity:.9; }
}
.lang-en-only{ display:none; }
body[data-lang="en"] .lang-en-only{ display:inline-block; }
body[data-lang="en"] .lang-es-only{ display:none; }
.check-list{ display:flex; flex-direction:column; gap:10px; margin: .6em 0 0; }
.check-list li{ position:relative; padding-left: 28px; }
.check-list li::before{
  content:''; position:absolute; left:4px; top:.62em; width:10px; height:10px; border-radius:50%;
  background: var(--gradient-btn);
  box-shadow: 0 0 0 3px rgba(201,164,50,.22);
}
.pricing-layout{ display:grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pricing-card{ margin:0; text-align:center; padding: 14px 0; }
.pricing-card-frame{
  position:relative; display:inline-block; line-height:0; overflow:hidden;
  width: min(100%, 340px); border-radius:14px; box-shadow:0 12px 32px rgba(10,24,64,.25);
  animation: card-float 6s ease-in-out infinite, card-glow 4.5s ease-in-out infinite;
}
.pricing-card-frame img{ display:block; width:100%; height:auto; }
.pricing-card-frame{ --sp: #fff 0%, #fff 20%, rgba(255,226,140,.95) 48%, rgba(255,200,90,0) 100%; }
.pricing-card-frame::before, .pricing-card-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transform: translateY(-100%);
  animation: card-sparkle 5.5s ease-in infinite;
  filter: drop-shadow(0 0 3px rgba(255,214,110,.95));
}
.pricing-card-frame::before{
  background:
    radial-gradient(circle 5px at 8% 6%, var(--sp)), radial-gradient(circle 7px at 22% 28%, var(--sp)),
    radial-gradient(circle 5px at 35% 12%, var(--sp)), radial-gradient(circle 9px at 47% 44%, var(--sp)),
    radial-gradient(circle 5px at 60% 20%, var(--sp)), radial-gradient(circle 7px at 72% 36%, var(--sp)),
    radial-gradient(circle 5px at 85% 8%, var(--sp)), radial-gradient(circle 7px at 92% 52%, var(--sp)),
    radial-gradient(circle 7px at 15% 60%, var(--sp)), radial-gradient(circle 5px at 30% 78%, var(--sp)),
    radial-gradient(circle 9px at 55% 70%, var(--sp)), radial-gradient(circle 5px at 68% 88%, var(--sp)),
    radial-gradient(circle 7px at 80% 66%, var(--sp)), radial-gradient(circle 5px at 42% 94%, var(--sp));
}
.pricing-card-frame::after{
  background:
    radial-gradient(circle 7px at 13% 16%, var(--sp)), radial-gradient(circle 5px at 28% 40%, var(--sp)),
    radial-gradient(circle 7px at 40% 4%, var(--sp)), radial-gradient(circle 5px at 52% 30%, var(--sp)),
    radial-gradient(circle 7px at 64% 50%, var(--sp)), radial-gradient(circle 5px at 76% 14%, var(--sp)),
    radial-gradient(circle 9px at 88% 28%, var(--sp)), radial-gradient(circle 5px at 5% 46%, var(--sp)),
    radial-gradient(circle 9px at 19% 72%, var(--sp)), radial-gradient(circle 5px at 38% 58%, var(--sp)),
    radial-gradient(circle 7px at 50% 84%, var(--sp)), radial-gradient(circle 5px at 62% 62%, var(--sp)),
    radial-gradient(circle 7px at 74% 96%, var(--sp)), radial-gradient(circle 5px at 90% 80%, var(--sp));
  animation-delay: .45s;
}
@keyframes card-sparkle{
  0%{ transform: translate(-6px,-100%); opacity:0; }
  6%{ opacity:1; }
  22%{ opacity:.55; }
  38%{ opacity:1; }
  58%{ transform: translate(6px,100%); opacity:1; }
  64%,100%{ transform: translate(6px,100%); opacity:0; }
}
@keyframes card-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
@keyframes card-glow{
  0%,100%{ box-shadow: 0 12px 32px rgba(10,24,64,.25), 0 0 14px 2px rgba(255,196,70,.30); }
  50%{ box-shadow: 0 12px 32px rgba(10,24,64,.25), 0 0 60px 18px rgba(255,196,70,.95); }
}
@media (prefers-reduced-motion: reduce){
  .pricing-card-frame, .pricing-card-frame::before, .pricing-card-frame::after{ animation: none; }
}
@media (max-width: 900px){
  .pricing-layout{ grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- FAQ (accordion) ---------- */
.accordion-item{
  border-bottom: 1px solid var(--color-border);
}
.accordion-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 20px 4px;
  background:transparent; border:0;
  text-align:left;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight:600;
  color: var(--color-primary-dark);
}
.accordion-trigger .plus{
  flex-shrink:0;
  width:30px; height:30px;
  border-radius:50%;
  border:1.5px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition: transform var(--transition), background var(--transition);
}
.accordion-trigger .plus::before, .accordion-trigger .plus::after{
  content:''; position:absolute; background: var(--color-primary);
}
.accordion-trigger .plus::before{ width:12px; height:2px; }
.accordion-trigger .plus::after{ width:2px; height:12px; }
.accordion-trigger[aria-expanded="true"] .plus{ transform: rotate(45deg); background: var(--color-primary); }
.accordion-trigger[aria-expanded="true"] .plus::before, .accordion-trigger[aria-expanded="true"] .plus::after{ background:#fff; }
.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
}
.accordion-panel-inner{ padding: 0 4px 22px; color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-weight:600; font-size:.88rem; color: var(--color-text); }
.form-field input, .form-field textarea, .form-field select{
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none;
  border-color: var(--color-gold-dark);
  box-shadow: 0 0 0 4px rgba(15,138,138,0.2);
}
.form-field textarea{ resize: vertical; min-height: 130px; }
.form-note{ font-size:.8rem; color: var(--color-text-muted); }
.form-status{
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight:500;
  display:none;
}
.form-status.is-success{ display:block; background: #e6f6ed; color:#1e6b3c; }
.form-status.is-error{ display:block; background: #fdecea; color:#a32d24; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* ---------- Contact info cards ---------- */
.contact-methods{ display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .contact-methods{ grid-template-columns: 1fr; } }
.contact-method{
  display:flex; gap:16px; align-items:flex-start;
  padding: 22px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.contact-method .value-icon{ background: var(--gradient-primary); color: #fff; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--gradient-button);
  color: rgba(10,24,64,0.9);
  padding-block: 64px 28px;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
}
@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; text-align:left; }
}
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom: 14px; }
.footer-brand img{ height:56px; }
.footer-brand span{ font-family: var(--font-heading); font-size:1.3rem; font-weight:700; color: var(--color-gold-metallic); }
.footer-about p{ font-size:.92rem; max-width:32ch; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:40px; height:40px; border-radius:50%;
  background: var(--gradient-btn);
  color: var(--color-btn-text);
  border: 1.5px solid rgba(255,255,255,0.35);
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition);
}
.footer-social a:hover{ background:#fff; color: var(--color-btn-text); border-color:#fff; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.footer-social svg{ width:18px; height:18px; }
.footer-col h5{
  font-family: var(--font-body);
  text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  color: var(--color-header-accent);
  margin-bottom: 18px; font-weight:700;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.93rem; transition: color var(--transition), padding-left var(--transition); }
.footer-col a:hover{ color: var(--color-header-accent); padding-left:4px; }
.footer-contact li{ display:flex; gap:10px; font-size:.93rem; align-items:flex-start; }
.footer-contact svg{ flex-shrink:0; margin-top:3px; color: var(--color-header-accent); width:16px; height:16px; }
.footer-bottom{
  border-top: 1px solid rgba(10,24,64,0.3);
  padding-top: 24px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:.82rem;
  color: rgba(10,24,64,0.75);
}
.footer-bottom a{ color: rgba(10,24,64,0.75); }
.footer-bottom a:hover{ color: var(--color-header-accent); }
.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 400;
  width: 46px; height:46px;
  border-radius:50%;
  background: var(--gradient-btn);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: var(--color-btn-text);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Misc pages: 404 ---------- */
.error-page{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 120px 24px 60px;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}
.error-page::before{
  content:'';
  position:absolute;
  inset:0;
  background-image: url('../assets/img/logo-hero.png');
  background-repeat: no-repeat;
  background-position: center 40%;
  background-size: min(70vw, 620px);
  opacity: 0.08;
  pointer-events: none;
}
.error-page > div{ position:relative; z-index:1; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px;
  background: var(--color-primary-dark); color:#fff;
  padding: 12px 18px; border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus{ top:12px; }

/* ---------- Carta del día ---------- */
.cod{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; justify-items:center; max-width:900px; margin-inline:auto; }
.cod.is-revealed{ grid-template-columns:300px minmax(0,1fr); justify-items:stretch; }
.cod [hidden]{ display:none !important; }
.cod-stage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:28px; }
.cod-card{
  appearance:none; -webkit-appearance:none; border:0; background:none; padding:0; margin:0; cursor:pointer;
  position:relative; display:block; width:260px; height:420px; perspective:1400px; color:#c9a227; font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.cod-card:disabled{ cursor:default; }
.cod-card:focus-visible{ outline:3px solid var(--color-primary); outline-offset:8px; border-radius:22px; }
.cod-card:not(:disabled):hover .cod-back{ filter:brightness(1.12); box-shadow:0 18px 44px rgba(10,24,64,.4), 0 0 44px rgba(245,213,107,.5); }
.cod-ghost{
  position:absolute; inset:0; border-radius:18px; border:3px solid #c9a227;
  background:linear-gradient(135deg,#1b4a6e,#081a2c); box-shadow:0 10px 24px rgba(10,24,64,.25);
  transition:opacity .5s ease, transform .6s ease;
}
.cod-ghost.g1{ transform:rotate(-8deg) translate(-16px,6px); }
.cod-ghost.g2{ transform:rotate(7deg) translate(16px,4px); }
.cod-card-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.2,.7,.2,1);
  animation:cod-float 5s ease-in-out infinite;
}
.cod.is-flipped .cod-card-inner{ transform:rotateY(180deg); animation:none; }
.cod.is-flipped .cod-ghost{ opacity:0; }
.cod.no-anim .cod-card-inner, .cod.no-anim .cod-ghost{ transition:none; }
.cod-face{
  position:absolute; inset:0; border-radius:18px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:3px solid transparent;
  background:
    linear-gradient(160deg,#1b4a6e 0%,#0f2f4a 55%,#081a2c 100%) padding-box,
    linear-gradient(135deg,#6b4f12,#f5e2a8 25%,#c9a227 50%,#f5e2a8 75%,#6b4f12) border-box;
  box-shadow:0 18px 40px rgba(10,24,64,.35), 0 0 30px rgba(245,213,107,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:24px 18px 22px; transition:filter .3s ease, box-shadow .3s ease;
}
.cod-face::before{ content:''; position:absolute; inset:10px; border:1px solid rgba(245,226,168,.45); border-radius:11px; pointer-events:none; }
.cod-front{ transform:rotateY(180deg); }
.cod-back svg{ position:absolute; inset:0; width:100%; height:100%; }
.cod-num{ position:relative; font-family:var(--font-heading); font-weight:700; font-size:1.8rem; line-height:1; color:#f5e2a8; letter-spacing:.06em; font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1; }
.cod-glyph{ position:relative; width:80%; height:auto; color:#f5d56b; filter:drop-shadow(0 0 8px rgba(245,213,107,.45)); }
.cod-name{
  position:relative; min-height:2.4em; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-heading); font-weight:700; font-size:1.2rem; line-height:1.15;
  text-transform:uppercase; letter-spacing:.12em; color:#f5e2a8;
}
.cod-info{ text-align:left; animation:cod-fade .8s .55s both; }
.cod.no-anim .cod-info{ animation:none; }
.cod-info h3{ font-size:clamp(1.9rem,3.6vw,2.5rem); margin:.1em 0 .15em; }
.cod-keys{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--color-primary); margin-bottom:1.1em; }
.cod-q{ margin-top:1.1em; padding-left:16px; border-left:3px solid #c9a227; font-style:italic; }
.cod-q strong{ font-style:normal; color:var(--color-primary-dark); }
.cod-note{ margin-top:1.3em; font-size:.84rem; color:var(--color-text-muted); }
.cod-actions{ margin-top:1.1em; }
.cod-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cod-actions .btn{ max-width:100%; white-space:normal; text-align:center; }
.cod-share-btn svg{ flex:none; }
.cod-share-msg{ margin:.7em 0 0; min-height:1.2em; font-size:.88rem; }
@keyframes cod-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes cod-fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width:760px){
  .cod.is-revealed{ grid-template-columns:1fr; justify-items:center; }
  .cod-info{ text-align:center; }
  .cod-actions{ justify-content:center; }
  .cod-q{ text-align:left; }
  .cod-card{ width:min(250px,70vw); height:min(404px,113vw); }
}
@media (prefers-reduced-motion: reduce){
  .cod-card-inner{ animation:none; transition:none; }
  .cod-info{ animation:none; }
}

/* ---------- Carta del día: tarjeta de aviso en la portada ---------- */
#carta-del-dia{ scroll-margin-top: 84px; }
.cod-teaser{
  display:flex; align-items:center; gap:30px; max-width:820px; margin:0 auto; padding:22px 32px;
  border-radius:24px; text-decoration:none; color:inherit;
  background: var(--color-bg-alt);
  border:1px solid rgba(201,162,39,.6);
  box-shadow:0 12px 30px rgba(10,24,64,.16), inset 0 0 0 5px rgba(255,255,255,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cod-teaser:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(10,24,64,.22), inset 0 0 0 5px rgba(255,255,255,.35); }
.cod-teaser-main{ flex:1; display:flex; align-items:center; gap:30px; min-width:0; text-decoration:none; color:inherit; border-radius:16px; }
.cod-teaser-main:focus-visible{ outline:3px solid var(--color-primary); outline-offset:5px; }
.cod-teaser-btns{ flex:none; display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.cod-teaser-btns .btn{ max-width:100%; white-space:normal; text-align:center; }
.cod-teaser-cards{ position:relative; flex:none; width:70px; height:98px; }
.cod-teaser-cards span{
  position:absolute; inset:0; border-radius:9px; border:2px solid #c9a227;
  background:linear-gradient(160deg,#1b4a6e,#081a2c); box-shadow:0 6px 14px rgba(10,24,64,.3);
}
.cod-teaser-cards span:first-child{ transform:rotate(-10deg) translate(-8px,2px); }
.cod-teaser-cards span:last-child{ transform:rotate(7deg) translate(8px,0); }
.cod-teaser-cards span:last-child::after{
  content:''; position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-50%);
  background:#f5d56b;
  clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);
}
.cod-teaser-text{ flex:1; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.cod-teaser-text .eyebrow{ margin-bottom:.3em; }
.cod-teaser-text strong{ font-family:var(--font-heading); font-size:1.7rem; line-height:1.1; color:var(--color-primary-dark); }
.cod-teaser-line{ margin-top:.35em; color:var(--color-text-muted); }
@media (max-width:640px){
  .cod-teaser{ flex-direction:column; text-align:center; gap:18px; padding:24px 20px; }
  .cod-teaser-main{ flex-direction:column; gap:18px; }
  .cod-teaser-btns{ align-self:stretch; }
  .cod-teaser-text{ align-items:center; }
}
@media (prefers-reduced-motion: reduce){ .cod-teaser{ transition:none; } .cod-teaser:hover{ transform:none; } }

/* ---------- Very small phones (320-380px): keep the header inside the screen ---------- */
@media (max-width: 380px){
  .site-header .container{ gap: 8px; }
  .brand{ font-size: 1.1rem; gap: 8px; }
  .brand img{ height: 52px; }
  .site-header.is-scrolled .brand img, .site-header.is-solid .brand img{ height: 50px; }
  .brand-name small{ letter-spacing: .14em; }
}

/* anchors such as #reservar stop below the sticky header */
#reservar{ scroll-margin-top: 70px; }

/* grid children may shrink below their content width, so a wide image or word never widens the page */
.grid > *{ min-width: 0; }
.contact-methods > *{ min-width: 0; }
.contact-method{ overflow-wrap: anywhere; }
.form-grid > *{ min-width: 0; }
.form-field input, .form-field select, .form-field textarea{ min-width: 0; max-width: 100%; }

/* services: one price column per therapist */
.price-table th.pc, .price-table td.pc{ text-align: center; }
.price-table td.pc{ white-space: normal; font-weight: 600; }
.price-table thead th{ vertical-align: bottom; }
.price-table td[rowspan]{ vertical-align: middle; }
@media (max-width: 640px){
  .price-table td.pc{ font-size: .72rem; padding-left: 3px; padding-right: 3px; }
  .price-table th.pc{ font-size: .8rem; padding-left: 3px; padding-right: 3px; }
}

.price-table th, .price-table td{ padding-left: 10px; padding-right: 10px; }
.price-table td:first-child .btn-xs{ width: 176px; }
@media (max-width: 1100px) and (min-width: 641px){
  .price-table td:first-child .btn-xs{ width: 124px; white-space: normal; height: auto; padding: 6px 10px; line-height: 1.15; text-align: center; }
}
@media (max-width: 640px){
  .price-table th, .price-table td{ padding-left: 3px; padding-right: 3px; }
  .price-table td:first-child .btn-xs{ width: 84px; }
  .price-table td.pc{ font-size: .68rem; }
}

/* tarot: prices by therapist */
.tp-table{ width: 100%; border-collapse: collapse; margin: .9em 0 .5em; }
.tp-table th, .tp-table td{ padding: 12px 8px; border-bottom: 1px solid rgba(201,162,39,.45); text-align: center; }
.tp-table thead th{ font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-primary-dark); padding-top: 4px; }
.tp-table tbody th{ font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); text-align: left; white-space: nowrap; }
.tp-table td{ font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.tp-table tbody tr:last-child th, .tp-table tbody tr:last-child td{ border-bottom: 0; }
@media (max-width: 640px){
  .tp-table th, .tp-table td{ padding: 10px 4px; }
  .tp-table td{ font-size: 1.15rem; }
  .tp-table tbody th{ font-size: .68rem; letter-spacing: .04em; }
}

/* ---------- Sticky WhatsApp button ---------- */
.wa-widget{ position: fixed; right: 20px; bottom: 22px; z-index: 410; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wa-float{
  width: 58px; height: 58px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.5);
  transition: transform var(--transition), box-shadow var(--transition);
  animation: wa-pulse 3.2s ease-out infinite;
}
.wa-float:hover, .wa-float:focus-visible, .wa-float[aria-expanded="true"]{ transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 24px rgba(0,0,0,.32); animation: none; }
.wa-menu{
  min-width: 220px; background: #fff; border-radius: 18px; padding: 14px 10px 10px;
  box-shadow: 0 14px 34px rgba(10,24,64,.28); border: 1px solid rgba(201,162,39,.45);
  transform-origin: bottom right; animation: wa-menu-in .18s ease-out;
}
.wa-menu[hidden]{ display: none; }
.wa-menu-title{ margin: 0 8px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.wa-menu a{
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  font-weight: 600; font-size: 1rem; color: var(--color-text);
  transition: background var(--transition);
}
.wa-menu a:hover, .wa-menu a:focus-visible{ background: rgba(37,211,102,.14); }
.wa-dot{ width: 12px; height: 12px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.25); flex: none; }
@keyframes wa-pulse{
  0%{ box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes wa-menu-in{ from{ opacity: 0; transform: translateY(8px) scale(.96); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .wa-float{ animation: none; } .wa-menu{ animation: none; } }
@media (max-width: 640px){ .wa-widget{ right: 14px; bottom: 16px; } .wa-float{ width: 54px; height: 54px; } .wa-menu{ min-width: 200px; } }

/* ---------- Home: clickable therapies picture ---------- */
.tmap{ position:relative; line-height:0; }
.tmap img{ display:block; }
.tmap-hot{ position:absolute; display:block; border-radius:22px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tmap-hot:focus-visible{ outline:none; }
/* circular glow around the icon of the therapy under the mouse */
.tmap-ring{ position:absolute; transform:translate(-50%,-50%) scale(.9); border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(245,226,168,.10) 55%, rgba(245,226,168,.22) 100%);
  box-shadow:0 0 0 2px rgba(245,226,168,.95), 0 0 26px rgba(240,194,74,.65), inset 0 0 18px rgba(245,226,168,.35);
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.25,1); }
.tmap-hot:hover .tmap-ring, .tmap-hot:focus-visible .tmap-ring{ opacity:1; transform:translate(-50%,-50%) scale(1); animation:tmapPulse 1.6s ease-in-out .3s infinite, tmapBuoy 2.8s ease-in-out infinite; }
.tmap-hot:active .tmap-ring{ transform:translate(-50%,-50%) scale(.97); }
@keyframes tmapPulse{ 50%{ box-shadow:0 0 0 2px rgba(245,226,168,.95), 0 0 38px rgba(240,194,74,.85), inset 0 0 24px rgba(245,226,168,.5); } }
.tmap-hint{ margin-top:12px; font-size:.9rem; color:var(--color-text-muted); line-height:1.4; }
/* buoyancy: the circle and the icon inside it bob up and down with a slight sway, as if floating on water */
.tmap-float{ position:absolute; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; opacity:0; background-image:var(--tmap-img); background-repeat:no-repeat; transition:opacity .2s ease; }
.tmap-hot:hover .tmap-float, .tmap-hot:focus-visible .tmap-float{ opacity:1; box-shadow:0 8px 14px rgba(5,15,46,.45); animation:tmapBuoy 2.8s ease-in-out infinite; }
@keyframes tmapBuoy{
  0%, 100%{ transform:translate(-50%,-50%) translateY(1.5%) rotate(-1deg) scale(1.02); }
  50%{ transform:translate(-50%,-50%) translateY(-5%) rotate(1deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){ .tmap-ring{ transition:none; } .tmap-hot:hover .tmap-ring, .tmap-hot:focus-visible .tmap-ring{ animation:none; transform:translate(-50%,-50%); } .tmap-hot:hover .tmap-float, .tmap-hot:focus-visible .tmap-float{ animation:none; transform:translate(-50%,-50%); } }

/* ---------- Therapy cards: hover animation ----------
   (the old ".card:hover" lift never showed on these cards because the scroll-reveal rule
   overrides it, so the effect is defined here with a higher specificity) */
.service-card{ position:relative; overflow:hidden; }
.service-card.reveal{ transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
.service-card .card-icon{ transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease; }
.service-card .card-link svg{ transition: transform .3s ease; }
/* the whole card opens the therapy (the "Conocer más" link stretches over the card) */
.service-card .card-link::after{ content:''; position:absolute; inset:0; z-index:1; }
.service-card:has(.card-link){ cursor:pointer; }
/* a soft band of light that crosses the card once */
.service-card::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); transform:translateX(-120%); }
.service-card.reveal.is-visible:hover, .service-card.reveal.is-visible:focus-within{
  transform: translateY(-9px) scale(1.018);
  border-color: rgba(201,162,39,.85);
  box-shadow: 0 22px 44px rgba(10,24,64,.24), 0 0 0 2px rgba(201,162,39,.75), 0 0 30px rgba(240,194,74,.4);
}
.service-card:hover .card-icon, .service-card:focus-within .card-icon{ transform: scale(1.14) rotate(-7deg); box-shadow: 0 0 22px rgba(240,194,74,.65); }
.service-card:hover .card-link svg, .service-card:focus-within .card-link svg{ transform: translateX(7px); }
.service-card:hover::after{ opacity:1; animation: cardSweep .9s ease forwards; }
@keyframes cardSweep{ from{ transform:translateX(-120%); } to{ transform:translateX(120%); } }
.service-card .card-link:focus-visible{ outline:none; }
.service-card:has(.card-link:focus-visible){ outline:3px solid var(--color-primary); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .service-card.reveal, .service-card .card-icon, .service-card .card-link svg{ transition:none; }
  .service-card.reveal.is-visible:hover, .service-card.reveal.is-visible:focus-within{ transform:none; }
  .service-card:hover .card-icon, .service-card:focus-within .card-icon, .service-card:hover .card-link svg, .service-card:focus-within .card-link svg{ transform:none; }
  .service-card:hover::after{ animation:none; opacity:0; }
}

/* ---------- About page: therapist cards, same hover animation as the therapy cards ---------- */
.sister-card{ position:relative; }
.sister-card.reveal{ transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
.sister-photo{ transition: font-size .4s cubic-bezier(.2,.8,.25,1), text-shadow .4s ease; }
.sister-card::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); transform:translateX(-120%); }
.sister-card.reveal.is-visible:hover, .sister-card.reveal.is-visible:focus-within{
  transform: translateY(-9px) scale(1.018);
  border-color: rgba(201,162,39,.85);
  box-shadow: 0 22px 44px rgba(10,24,64,.24), 0 0 0 2px rgba(201,162,39,.75), 0 0 30px rgba(240,194,74,.4);
}
.sister-card:hover .sister-photo, .sister-card:focus-within .sister-photo{ font-size:3.7rem; text-shadow:0 0 26px rgba(255,255,255,.75), 0 0 8px rgba(240,194,74,.9); }
.sister-card:hover::after{ opacity:1; animation: cardSweep .9s ease forwards; }
@media (prefers-reduced-motion: reduce){
  .sister-card.reveal, .sister-photo{ transition:none; }
  .sister-card.reveal.is-visible:hover, .sister-card.reveal.is-visible:focus-within{ transform:none; }
  .sister-card:hover .sister-photo, .sister-card:focus-within .sister-photo{ font-size:3rem; }
  .sister-card:hover::after{ animation:none; opacity:0; }
}

/* ---------- Home: process steps as cards ---------- */
.steps-cards{ gap:28px; }
.steps-cards .step{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:30px 26px 28px;
  text-align:left;
}
.steps-cards .step.reveal{ transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
.steps-cards .step-num{
  width:54px; height:54px; margin-bottom:18px; font-size:1.45rem;
  background:var(--gradient-primary); color:#fff; text-shadow:0 1px 2px rgba(4,50,52,.5);
  box-shadow:0 0 0 3px rgba(15,138,138,.25), 0 6px 14px rgba(4,50,52,.28);
  transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease;
}
.steps-cards .step h4{ margin-bottom:.45em; }
.steps-cards .step p{ color:var(--color-text-muted); margin:0; }
/* light band that crosses the card once on hover (same idea as the therapy cards) */
.steps-cards .step::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%); background-size:300% 100%; background-position:100% 0; }
.steps-cards .step.reveal.is-visible:hover{
  transform: translateY(-9px) scale(1.018);
  border-color: rgba(201,162,39,.85);
  box-shadow: 0 22px 44px rgba(10,24,64,.22), 0 0 0 2px rgba(201,162,39,.75), 0 0 30px rgba(240,194,74,.4);
}
.steps-cards .step:hover .step-num{ transform: scale(1.14) rotate(-8deg); box-shadow:0 0 0 3px rgba(15,138,138,.4), 0 0 22px rgba(15,138,138,.6); }
.steps-cards .step:hover::before{ opacity:1; animation: stepSweep .9s ease forwards; }
@keyframes stepSweep{ from{ background-position:100% 0; } to{ background-position:0 0; } }
/* small gold arrow between the cards (only when the four cards share one row) */
@media (min-width: 901px){
  .steps-cards .step:not(:last-child)::after{
    content:'\203A'; position:absolute; right:-29px; top:50%; transform:translateY(-50%); z-index:3;
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--gradient-primary); color:#fff; font-size:1.5rem; line-height:1; padding-bottom:3px; box-shadow:0 3px 8px rgba(4,50,52,.35);
  }
}
@media (prefers-reduced-motion: reduce){
  .steps-cards .step.reveal, .steps-cards .step-num{ transition:none; }
  .steps-cards .step.reveal.is-visible:hover{ transform:none; }
  .steps-cards .step:hover .step-num{ transform:none; }
  .steps-cards .step:hover::before{ animation:none; opacity:0; }
}

/* ---------- Palette: night-cobalt header, menus and footer ---------- */
.brand-name small{ color: rgba(245,226,168,.92); }
.nav-desktop a:hover{ background: rgba(245,226,168,.14); color: var(--color-header-accent); }
.nav-submenu{ border: 1px solid rgba(245,226,168,.28); box-shadow: 0 14px 36px rgba(3,10,35,.55); }
.lang-switch{ background: rgba(255,255,255,.08); border-color: rgba(245,226,168,.55); }
.lang-switch button:not(.active):hover{ background: rgba(245,226,168,.16); }
.mobile-menu-close{ border-color: rgba(245,226,168,.5); }
.mobile-nav a{ border-bottom-color: rgba(245,226,168,.22); }
.mobile-lang-switch button{ border-color: rgba(245,226,168,.5); background: rgba(255,255,255,.08); }
.mobile-lang-switch button.active{ border-color: transparent; }
.site-footer{ background: linear-gradient(135deg, #050f2e 0%, #0b1f55 100%); color: rgba(251,247,238,.88); }
.footer-bottom{ border-top-color: rgba(245,226,168,.25); color: rgba(251,247,238,.72); }
.footer-bottom a{ color: rgba(251,247,238,.72); }
.footer-col a:hover, .footer-bottom a:hover{ color: var(--color-header-accent); }

/* ---------- Pull quote, classic lavender variant #E6E6FA (Canalizaciones) ---------- */
.pull-quote-lavender{
  background: #e6e6fa;
  border-color: rgba(166,124,0,.7);
  box-shadow: 0 16px 38px rgba(46,23,48,.20), inset 0 0 0 6px rgba(255,255,255,.55);
}
.pull-quote-lavender::before, .pull-quote-lavender::after{ color: rgba(166,124,0,.45); }
.pull-quote-lavender .pull-quote-icon{ color:#a67c00; }
.pull-quote-lavender blockquote{ color:#2e1730; }

/* ---------- Contact page: cards hover animation (same idea as the therapy cards; the links inside stay independent) ---------- */
.contact-method{ position:relative; overflow:hidden; transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
.contact-method .value-icon{ transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease; }
.contact-method::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); transform:translateX(-120%); }
.contact-method:hover, .contact-method:focus-within{
  transform: translateY(-9px) scale(1.018);
  border-color: rgba(201,162,39,.85);
  box-shadow: 0 22px 44px rgba(10,24,64,.24), 0 0 0 2px rgba(201,162,39,.75), 0 0 30px rgba(240,194,74,.4);
}
.contact-method:hover .value-icon, .contact-method:focus-within .value-icon{ transform: scale(1.14) rotate(-7deg); box-shadow: 0 0 22px rgba(15,138,138,.6); }
.contact-method:hover::after{ opacity:1; animation: cardSweep .9s ease forwards; }
@media (prefers-reduced-motion: reduce){
  .contact-method, .contact-method .value-icon{ transition:none; }
  .contact-method:hover, .contact-method:focus-within{ transform:none; }
  .contact-method:hover .value-icon, .contact-method:focus-within .value-icon{ transform:none; }
  .contact-method:hover::after{ animation:none; opacity:0; }
}

/* ---------- About page: values as cards, with the same hover animation as the other cards ---------- */
.value-card{
  position:relative; overflow:hidden; align-items:center; gap:18px;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:26px 24px;
}
.value-card.reveal{ transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
.value-card .value-icon{
  width:56px; height:56px; border-radius:15px; background:var(--gradient-primary); color:#fff;
  transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease;
}
.value-card .value-icon svg{ width:27px; height:27px; }
.value-card h4{ margin-bottom:.3em; }
.value-card p{ margin:0; color:var(--color-text-muted); }
.value-card::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); transform:translateX(-120%); }
.value-card.reveal.is-visible:hover{
  transform: translateY(-9px) scale(1.018);
  border-color: rgba(201,162,39,.85);
  box-shadow: 0 22px 44px rgba(10,24,64,.24), 0 0 0 2px rgba(201,162,39,.75), 0 0 30px rgba(240,194,74,.4);
}
.value-card:hover .value-icon{ transform: scale(1.14) rotate(-7deg); box-shadow: 0 0 22px rgba(15,138,138,.6); }
.value-card:hover::after{ opacity:1; animation: cardSweep .9s ease forwards; }
@media (max-width: 480px){ .value-card{ padding:22px 18px; gap:14px; } .value-card .value-icon{ width:48px; height:48px; } }
@media (prefers-reduced-motion: reduce){
  .value-card.reveal, .value-card .value-icon{ transition:none; }
  .value-card.reveal.is-visible:hover{ transform:none; }
  .value-card:hover .value-icon{ transform:none; }
  .value-card:hover::after{ animation:none; opacity:0; }
}

/* ---------- "See the full meaning" link under the card messages (games, card of the day) ---------- */
.carta-more{ margin:8px 0 0 !important; font-size:.9rem; font-weight:600; }
.carta-more a{ color:#f5e2a8; text-decoration:underline; text-underline-offset:3px; }
.carta-more a:hover, .carta-more a:focus-visible{ color:#fff; }

/* ---------- Tarot page: one area per therapist inside the CTA banner ---------- */
.cta-therapist{ margin:1.6rem 0 0; padding:22px 18px 24px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(245,226,168,.5); }
.cta-therapist h3{ margin:0; font-size:1.7rem; }
.cta-therapist .cta-sessions{ margin:.3rem auto 0; color:#f5e2a8; font-weight:600; letter-spacing:.02em; }
.cta-therapist .cta-sessions span{ display:inline-block; white-space:nowrap; margin:0 .6em; }
.cta-therapist .cta-actions{ margin-top:1rem; }
.cta-therapist .cta-pay{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.2); }
.cta-therapist .cta-pay .cta-actions{ margin-top:0; }
.cta-therapist .cta-pay-note{ margin:.8rem auto 0; font-size:.9rem; }

/* ---------- Note for clients in Chile (Janet's prices) ---------- */
.price-chile{ margin-top:.6rem; font-size:.88rem; line-height:1.45; }
.g-chile{ margin:.5rem 0 0; font-size:.85rem; line-height:1.45; color:var(--color-text-muted); }
.g-chile[hidden]{ display:none; }

/* ---------- Therapies picture: popup with a quick description and the link ---------- */
.tpop{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,15,46,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .2s ease; }
.tpop[hidden]{ display:none; }
.tpop.is-open{ opacity:1; }
.tpop-card{ position:relative; width:min(380px,100%); padding:30px 26px 26px; text-align:center; border-radius:22px; background:var(--color-surface); border:2px solid rgba(201,162,39,.85);
  box-shadow:0 0 0 5px rgba(201,162,39,.2), 0 24px 56px rgba(5,15,46,.5); transform:translateY(10px) scale(.96); transition:transform .25s cubic-bezier(.2,.8,.25,1); }
.tpop.is-open .tpop-card{ transform:none; }
.tpop-card h3{ margin:0 0 .45em; font-size:1.7rem; color:var(--color-primary-dark); }
.tpop-card p{ margin:0 0 1.3rem; color:var(--color-text); line-height:1.55; }
.tpop-go{ max-width:100%; }
.tpop-x{ position:absolute; top:8px; right:10px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--color-text-muted); font-size:1.7rem; line-height:1; cursor:pointer; }
.tpop-x:hover, .tpop-x:focus-visible{ background:rgba(201,162,39,.2); color:var(--color-primary-dark); }
@media (prefers-reduced-motion: reduce){ .tpop, .tpop-card{ transition:none; } }

/* ---------- Pictures: the sun ("La Fuente") shines and glows ---------- */
.tmap-sun{ position:absolute; left:50%; top:49.95%; width:40%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; line-height:0; }
.tmap-sun i, .tmap-sun b{ position:absolute; display:block; }
/* breathing halo around the disk, wider than the box so the glow clearly spreads (the disk itself stays untouched so its text keeps the contrast) */
.tmap-sun-glow{ inset:-35%; mix-blend-mode:screen;
  background:radial-gradient(circle closest-side, rgba(255,226,150,0) 0, rgba(255,226,150,0) 30%, rgba(255,230,150,.9) 32.5%, rgba(255,208,110,.5) 44%, rgba(255,190,90,.22) 64%, rgba(255,190,90,.07) 84%, rgba(255,190,90,0) 100%);
  animation:sunBreathe 3.6s ease-in-out infinite; }
/* ripples that leave the disk like waves of light */
.tmap-sun-wave{ left:28.75%; top:28.75%; width:42.5%; height:42.5%; border-radius:50%; box-shadow:0 0 0 2px rgba(255,236,170,.9), 0 0 16px 3px rgba(255,214,120,.7); opacity:0; animation:sunWave 4.2s ease-out infinite; }
.tmap-sun-wave.w2{ animation-delay:2.1s; }
/* thin rays that slowly turn and shimmer around the disk */
.tmap-sun-rays{ inset:-10%; mix-blend-mode:screen; opacity:.7;
  background:repeating-conic-gradient(rgba(255,244,200,1) 0 .9deg, rgba(255,244,200,0) .9deg 6.5deg);
  -webkit-mask-image:radial-gradient(circle closest-side, transparent 0, transparent 43%, #000 51%, #000 64%, transparent 96%);
          mask-image:radial-gradient(circle closest-side, transparent 0, transparent 43%, #000 51%, #000 64%, transparent 96%);
  animation:sunSpin 50s linear infinite, sunShimmer 2.8s ease-in-out infinite; }
/* a glint of light that crosses the disk every few seconds */
.tmap-sun-sheen{ left:28.75%; top:28.75%; width:42.5%; height:42.5%; border-radius:50%; overflow:hidden;
  background:linear-gradient(112deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 64%) 130% 0 / 260% 100% no-repeat;
  animation:sunSheen 4.4s ease-in-out infinite; }
/* little stars that twinkle around it */
.tmap-spark{ width:5.4%; height:5.4%; background:#fff6cf; clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);
  opacity:0; filter:drop-shadow(0 0 4px rgba(255,226,150,1)); animation:sunTwinkle 3s ease-in-out infinite; }
.tmap-spark.s1{ left:14%; top:20%; animation-delay:0s; }
.tmap-spark.s2{ left:78%; top:14%; width:4.2%; height:4.2%; animation-delay:.9s; animation-duration:3.4s; }
.tmap-spark.s3{ left:86%; top:58%; animation-delay:1.8s; }
.tmap-spark.s4{ left:20%; top:78%; width:4.2%; height:4.2%; animation-delay:.5s; animation-duration:3.8s; }
.tmap-spark.s5{ left:56%; top:90%; width:3.4%; height:3.4%; animation-delay:1.4s; animation-duration:2.8s; }
@keyframes sunBreathe{ 0%,100%{ opacity:.5; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.18); } }
@keyframes sunWave{ 0%{ opacity:.85; transform:scale(1); } 100%{ opacity:0; transform:scale(2.4); } }
@keyframes sunSpin{ to{ transform:rotate(360deg); } }
@keyframes sunShimmer{ 0%,100%{ opacity:.4; } 50%{ opacity:.9; } }
@keyframes sunSheen{ 0%,35%{ background-position:130% 0; } 70%,100%{ background-position:-30% 0; } }
@keyframes sunTwinkle{ 0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(25deg); } }
@media (prefers-reduced-motion: reduce){
  .tmap-sun-glow, .tmap-sun-rays, .tmap-sun-sheen, .tmap-spark, .tmap-sun-wave{ animation:none; }
  .tmap-sun-glow{ opacity:.8; } .tmap-sun-rays{ opacity:.5; } .tmap-sun-sheen, .tmap-spark, .tmap-sun-wave{ display:none; }
}

/* ---------- Servicios picture: the 72 Names of God, faint like the binary code ---------- */
.tmap-names{ position:absolute; inset:0; overflow:hidden; pointer-events:none; user-select:none; -webkit-user-select:none; line-height:1;
  color:#a9bdff; font-family:'Heebo','David','Arial Hebrew','Arial',sans-serif; font-weight:300; letter-spacing:.06em; }
.tmap-names span{ position:absolute; white-space:nowrap; text-shadow:0 0 5px rgba(120,150,255,.4); }

/* ---------- Link inside a paragraph ---------- */
.text-link{ color:var(--color-cobalt); font-weight:600; text-decoration:underline; text-decoration-color:rgba(201,162,39,.85); text-decoration-thickness:2px; text-underline-offset:3px; transition:color .2s ease, text-decoration-color .2s ease; }
.text-link:hover, .text-link:focus-visible{ color:#a67c00; text-decoration-color:#a67c00; }


/* ---------- Carta del día: the card's short video ---------- */
.cod-video{ margin:0 0 1.2em; }
.cod-video-frame{ position:relative; }
.cod-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--radius-lg); background:var(--color-primary-dark); cursor:pointer;
  border:1px solid rgba(201,162,39,.7); box-shadow:0 0 24px rgba(240,194,74,.28), 0 12px 26px rgba(10,24,64,.28); }
.cod-video-mark{ position:absolute; right:clamp(10px,2.4%,16px); bottom:clamp(8px,2.2%,14px); pointer-events:none; font-family:var(--font-heading); font-weight:600; letter-spacing:.06em;
  font-size:clamp(.7rem,2vw,.95rem); color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(10,24,64,.85), 0 0 10px rgba(10,24,64,.55); }
.cod-video-sound{ position:absolute; left:clamp(10px,2.4%,16px); bottom:clamp(8px,2.2%,14px); width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  color:#fff; background:rgba(10,24,64,.62); border:1px solid rgba(240,194,74,.8); backdrop-filter:blur(3px); transition:background .2s, transform .2s; }
.cod-video-sound:hover, .cod-video-sound:focus-visible{ background:rgba(10,24,64,.85); transform:scale(1.08); }
.cod-video-sound .snd-on{ display:none; }
.cod-video-sound[aria-pressed="true"] .snd-on{ display:block; }
.cod-video-sound[aria-pressed="true"] .snd-off{ display:none; }

/* ---------- Links to Janet's page (her name wherever it appears as a name) ---------- */
.janet-link{ color:inherit; font-weight:inherit; text-decoration:underline; text-decoration-color:rgba(201,162,39,.85); text-decoration-thickness:1.5px; text-underline-offset:3px; transition:text-decoration-color .2s, opacity .2s; }
.janet-link:hover, .janet-link:focus-visible{ text-decoration-color:currentColor; opacity:.85; }

/* ---------- Janet's page: diplomas ---------- */
.diploma-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:16px 16px 20px; text-align:center; }
.diploma-thumb{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:10px; background:#f3eee2; border:1px solid rgba(201,162,39,.55); margin-bottom:14px; transition:box-shadow .25s, transform .25s; }
.diploma-thumb img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.diploma-thumb:hover, .diploma-thumb:focus-visible{ box-shadow:0 10px 24px rgba(201,162,39,.35); transform:translateY(-3px); }
.diploma-thumb:focus-visible{ outline:3px solid #f0c24a; outline-offset:3px; }
.diploma-card h3{ font-size:1.25rem; margin:0 0 .3em; }
.diploma-meta{ margin:0; font-size:.9rem; color:var(--color-text-muted); }
.diploma-lightbox{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px; background:rgba(5,15,46,.9); cursor:zoom-out; }
.diploma-lightbox[hidden]{ display:none; }
.diploma-lightbox img{ max-width:min(96vw,1100px); max-height:90vh; width:auto; height:auto; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); background:#fff; cursor:default; }
.diploma-lightbox-close{ position:absolute; top:14px; right:18px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(240,194,74,.8); background:rgba(10,24,64,.7); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; }
.diploma-lightbox-close:hover, .diploma-lightbox-close:focus-visible{ background:rgba(10,24,64,.95); }
body.diploma-open{ overflow:hidden; }

/* ---------- About page: Janet's card is one big link to her page (the booking button keeps working) ---------- */
.sister-card.is-link{ cursor:pointer; }
.sister-card.is-link h3 a::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.sister-card.is-link h3 a:focus-visible{ outline:none; }
.sister-card.is-link h3 a:focus-visible::after{ outline:3px solid #f0c24a; outline-offset:-3px; }
.sister-card.is-link .btn{ position:relative; z-index:3; }

/* ---------- Blue outline button inside light service cards (the default card button is white, for dark panels) ---------- */
.service-card .btn-outline.btn-on-light{ border-color:var(--color-cobalt); color:var(--color-cobalt); align-self:flex-start; width:50%; min-width:120px; }
.service-card .btn-outline.btn-on-light:hover, .service-card .btn-outline.btn-on-light:focus-visible{ background:var(--gradient-btn); color:var(--color-btn-text); border-color:var(--color-btn-silver-dark); }