/* ==========================================================================
   Success by Karely — styles.css
   Tokens, clases de vidrio, fondos vivos, landing y (más adelante) blog.
   Estilo: vidrio esmerilado sobre terciopelo vino con filos de oro.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --vino: #56172C;
  --vino-profundo: #3A0E1D;
  --vino-suave: #7A2A45;
  --rosa-vino: #9E3B5B;
  --oro: #D3AE7A;
  --oro-medio: #E4C692;
  --oro-claro: #F6DCB9;
  --oro-oscuro: #9A6E3A;          /* oro legible sobre fondos claros */
  --marfil: #F8EFEA;
  --blanco: #FFFCFA;
  --tinta: #2B1219;
  --tinta-suave: #6B4B55;
  --error: #9B1C3A;

  /* Sello 6SGS */
  --sgs-azul: #355062;
  --sgs-blanco: #FEFCFB;
  --sgs-coral: #F17377;

  --degradado-oro: linear-gradient(115deg, #C99F66 0%, #E9CD98 38%, #F6DCB9 55%, #D8B47E 80%, #C99F66 100%);
  --degradado-vino: linear-gradient(160deg, var(--vino-profundo) 0%, var(--vino) 55%, var(--vino-profundo) 100%);

  --fuente-titulos: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --fuente-texto: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radio-panel: 28px;
  --radio-tarjeta: 16px;
  --radio-pill: 999px;

  --blur: 18px;
  --blur-claro: 16px;
  --sombra-vidrio: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -30px rgba(20, 4, 10, .6);
  --sombra-clara: inset 0 1px 0 rgba(255, 255, 255, .7), 0 24px 50px -30px rgba(86, 23, 44, .35);

  --ancho: 1120px;
  --medida: 68ch;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-alto: 64px;
}

@media (max-width: 640px) {
  :root { --blur: 10px; --blur-claro: 10px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--marfil);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}

/* Textura de grano (terciopelo) sobre todo el sitio */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--fuente-titulos); font-weight: 500; line-height: 1.18; margin: 0; font-optical-sizing: auto; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

::selection { background: var(--oro-claro); color: var(--vino-profundo); }

/* Foco visible dorado; en fondos claros se refuerza con un anillo vino */
:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}
.seccion-clara :focus-visible,
.seccion-blanca :focus-visible,
.glass-claro :focus-visible {
  outline-color: var(--vino);
  box-shadow: 0 0 0 5px rgba(211, 174, 122, .45);
}

.saltar {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--radio-pill);
  background: var(--oro-claro);
  color: var(--vino-profundo);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.saltar:focus { transform: none; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

/* ---------- 3. Vidrio ---------- */
.glass, .glass-claro, .glass-oro { position: relative; }

.glass {
  background: rgba(255, 252, 250, .08);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid rgba(246, 220, 185, .22);
  box-shadow: var(--sombra-vidrio);
}

.glass-claro {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(var(--blur-claro)) saturate(130%);
  backdrop-filter: blur(var(--blur-claro)) saturate(130%);
  border: 1px solid rgba(211, 174, 122, .35);
  box-shadow: var(--sombra-clara);
}

.glass-oro {
  background: rgba(255, 252, 250, .07);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow: var(--sombra-vidrio), 0 0 60px -20px rgba(211, 174, 122, .35);
}

/* Reflejo diagonal en la parte superior */
.glass::before, .glass-claro::before, .glass-oro::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 38%);
}

/* Filo de oro en degradado (máscara) */
.glass-oro::after, .filo-oro::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--degradado-oro);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.filo-oro { border-color: transparent; }

/* Sin backdrop-filter: fondos más opacos y legibles */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-oro { background: rgba(58, 14, 29, .9); }
  .glass-claro { background: rgba(255, 252, 250, .95); }
}

/* ---------- 4. Tipografía y utilidades ---------- */
.texto-oro {
  color: var(--oro-medio);
  background: var(--degradado-oro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.titulo-seccion {
  font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 22ch;
  text-wrap: balance;
}

.intro {
  margin-top: 14px;
  max-width: 56ch;
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  text-wrap: pretty;
}

.cabecera-seccion { margin-bottom: clamp(30px, 4.5vw, 50px); }
.cabecera-seccion:not(.cabecera-izq):not(.cabecera-fila) { text-align: center; }
.cabecera-seccion:not(.cabecera-izq):not(.cabecera-fila) .titulo-seccion,
.cabecera-seccion:not(.cabecera-izq):not(.cabecera-fila) .intro { margin-inline: auto; }
.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radio-pill);
  font-size: .9rem;
  font-weight: 400;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(211, 174, 122, .5);
  color: var(--vino);
}

.k-tipografica {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  line-height: 1;
  color: var(--oro-medio);
  background: var(--degradado-oro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wordmark {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--oro-medio);
  background: var(--degradado-oro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark em { font-style: italic; font-weight: 300; font-size: .7em; }

/* ---------- 5. Botones ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radio-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .6; cursor: not-allowed; pointer-events: none; }

.btn-principal {
  background: var(--degradado-oro);
  color: var(--vino-profundo);
  box-shadow: 0 12px 32px -14px rgba(211, 174, 122, .75), inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* Shimmer dorado solo en el CTA principal */
.btn-principal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease);
}
.btn-principal:hover { box-shadow: 0 16px 40px -14px rgba(211, 174, 122, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-principal:hover::after { transform: translateX(130%); }

.btn-vidrio {
  background: rgba(255, 252, 250, .08);
  border-color: rgba(246, 220, 185, .38);
  color: var(--oro-claro);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-vidrio:hover { background: rgba(255, 252, 250, .16); border-color: rgba(246, 220, 185, .6); }

.btn-linea {
  background: transparent;
  border-color: rgba(86, 23, 44, .35);
  color: var(--vino);
}
.btn-linea:hover { background: var(--vino); border-color: var(--vino); color: var(--oro-claro); }

.btn-sm { min-height: 42px; padding: 0 20px; font-size: .95rem; }
.btn-ancho { width: 100%; }

.btn-circulo {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(86, 23, 44, .25);
  background: rgba(255, 255, 255, .6);
  color: var(--vino);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn-circulo:hover { background: var(--vino); color: var(--oro-claro); }
.btn-circulo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 6. Fondos de sección ---------- */
.seccion-oscura, .seccion-clara, .seccion-blanca {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(60px, 8vw, 108px);
}

.seccion-oscura {
  color: var(--oro-claro);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(122, 42, 69, .9) 0%, transparent 55%),
    radial-gradient(90% 70% at 95% 100%, rgba(86, 23, 44, 1) 0%, transparent 60%),
    var(--degradado-vino);
}
.seccion-oscura .titulo-seccion { color: var(--blanco); }
.seccion-oscura .intro { color: rgba(246, 220, 185, .88); }

.seccion-clara { background: var(--marfil); color: var(--tinta); }
.seccion-blanca { background: var(--blanco); color: var(--tinta); }
.seccion-clara .titulo-seccion, .seccion-blanca .titulo-seccion { color: var(--vino); }
.seccion-clara .intro, .seccion-blanca .intro { color: var(--tinta-suave); }

/* Orbes de luz difusa (degradados radiales: mismo efecto que un blur de 100px, sin su costo) */
.fondo-vivo, .fondo-suave {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.orbe {
  position: absolute;
  border-radius: 50%;
  width: clamp(360px, 55vw, 820px);
  aspect-ratio: 1;
  will-change: transform;
  animation: flotar-a 26s ease-in-out infinite alternate;
}
.orbe-1 { top: -22%; left: -14%; background: radial-gradient(circle, rgba(122, 42, 69, .95) 0%, rgba(122, 42, 69, 0) 68%); }
.orbe-2 { top: 18%; right: -18%; background: radial-gradient(circle, rgba(211, 174, 122, .25) 0%, rgba(211, 174, 122, 0) 66%); animation-name: flotar-b; animation-duration: 30s; }
.orbe-3 { bottom: -30%; left: 20%; background: radial-gradient(circle, rgba(158, 59, 91, .55) 0%, rgba(158, 59, 91, 0) 66%); animation-duration: 22s; animation-direction: alternate-reverse; }
.orbe-4 { top: -10%; right: 8%; width: clamp(240px, 30vw, 460px); background: radial-gradient(circle, rgba(228, 198, 146, .18) 0%, rgba(228, 198, 146, 0) 66%); animation-name: flotar-b; animation-duration: 24s; }

@keyframes flotar-a {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
  100% { transform: translate3d(-3vw, 8vh, 0) scale(.96); }
}
@keyframes flotar-b {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-7vw, 6vh, 0) scale(1.1); }
  100% { transform: translate3d(3vw, -4vh, 0) scale(.94); }
}
/* Pausar orbes fuera de pantalla */
.fondo-vivo:not(.activo) .orbe { animation-play-state: paused; }

.orbe-claro {
  position: absolute;
  border-radius: 50%;
  width: clamp(320px, 45vw, 680px);
  aspect-ratio: 1;
}
.oc-1 { top: -20%; right: -12%; background: radial-gradient(circle, rgba(211, 174, 122, .22) 0%, rgba(211, 174, 122, 0) 66%); }
.oc-2 { bottom: -25%; left: -15%; background: radial-gradient(circle, rgba(158, 59, 91, .10) 0%, rgba(158, 59, 91, 0) 66%); }
.oc-3 { top: 30%; left: 40%; background: radial-gradient(circle, rgba(228, 198, 146, .20) 0%, rgba(228, 198, 146, 0) 66%); }

/* Halo dorado que sigue el cursor (escritorio) */
.halo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(460px circle at var(--hx, 50%) var(--hy, 50%), rgba(211, 174, 122, .11), transparent 60%);
}
.con-halo .halo { opacity: 1; }

/* ---------- 7. Marcadores de imagen ---------- */
[data-espacio] { position: relative; overflow: hidden; }

.marcador {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  background:
    radial-gradient(80% 60% at 30% 15%, rgba(211, 174, 122, .28), transparent 60%),
    radial-gradient(70% 50% at 80% 90%, rgba(158, 59, 91, .35), transparent 60%),
    linear-gradient(160deg, var(--vino-suave), var(--vino-profundo));
  transition: opacity .5s var(--ease);
}
.marcador::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radio-tarjeta) - 4px);
  border: 1px solid rgba(246, 220, 185, .22);
}
.marcador-k {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: clamp(3rem, 12cqi, 7rem);
  line-height: 1;
  background: var(--degradado-oro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--oro-medio);
}
.marcador-marca {
  font-family: var(--fuente-titulos);
  font-size: .95rem;
  letter-spacing: .02em;
  color: rgba(246, 220, 185, .8);
}
.marcador-marca em { font-weight: 300; }
[data-espacio] { container-type: inline-size; }

.media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.tiene-imagen > .media-img { opacity: 1; }
.tiene-imagen > .marcador, .tiene-imagen > .sin-imagen { opacity: 0; visibility: hidden; }

/* ---------- 8. Navegación ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events: none;
}
.nav-capsula {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--ancho);
  height: var(--nav-alto);
  margin-inline: auto;
  padding: 0 10px 0 14px;
  border-radius: var(--radio-pill);
  border: 1px solid transparent;
  color: var(--oro-claro);
  transition: max-width .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* Cápsula de vidrio vino al hacer scroll */
.nav.flotante .nav-capsula {
  max-width: 1080px;
  background: rgba(58, 14, 29, .84);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  border-color: rgba(246, 220, 185, .22);
  box-shadow: var(--sombra-vidrio);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.flotante .nav-capsula { background: rgba(58, 14, 29, .95); }
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.monograma {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(246, 220, 185, .35);
  background: rgba(255, 252, 250, .06);
}
.monograma .k-tipografica { font-size: 1.55rem; transform: translateY(-1px); }
.monograma .media-img, .monograma-cima .media-img { object-fit: contain; padding: 6px; }
.marca-texto {
  font-family: var(--fuente-titulos);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--blanco);
  white-space: nowrap;
}
.marca-texto em { font-weight: 400; color: var(--oro-medio); }

.nav-enlaces {
  display: none;
  margin-inline: auto;
  gap: 4px;
}
.nav-enlaces a {
  padding: 8px 14px;
  border-radius: var(--radio-pill);
  font-size: .98rem;
  text-decoration: none;
  color: rgba(246, 220, 185, .9);
  transition: color .2s, background-color .2s;
}
.nav-enlaces a:hover, .nav-enlaces a[aria-current='true'] { color: var(--blanco); background: rgba(255, 252, 250, .08); }

.nav-acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.btn-idioma {
  min-width: 44px;
  height: 44px;
  border-radius: var(--radio-pill);
  border: 1px solid rgba(246, 220, 185, .3);
  background: transparent;
  color: var(--oro-claro);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
}
.btn-idioma:hover { background: rgba(255, 252, 250, .1); }
.nav-espacio { display: none; }

.btn-menu {
  display: inline-grid;
  place-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(246, 220, 185, .3);
  background: transparent;
  cursor: pointer;
}
.btn-menu span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--oro-claro);
  transition: transform .3s var(--ease);
}
.btn-menu[aria-expanded='true'] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.btn-menu[aria-expanded='true'] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu-movil {
  pointer-events: auto;
  max-width: 520px;
  margin: 10px auto 0;
  padding: 18px;
  border-radius: var(--radio-panel);
  background: rgba(58, 14, 29, .82);
  animation: entrar .28s var(--ease);
}
.menu-movil nav { display: grid; margin-bottom: 14px; }
.menu-movil nav a {
  padding: 12px 10px;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  color: var(--blanco);
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 220, 185, .12);
}
.menu-movil .btn { width: 100%; }

@media (min-width: 560px) {
  .nav-espacio { display: inline-flex; }
}
@media (min-width: 1000px) {
  .nav-enlaces { display: flex; }
  .btn-menu, .menu-movil { display: none !important; }
}
@media (max-width: 380px) {
  .marca-texto { font-size: 1.05rem; }
  .nav-capsula { gap: 8px; }
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 9. Hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-alto) + 60px + env(safe-area-inset-top));
}
.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
.hero-sello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 10px;
  border-radius: var(--radio-pill);
  border: 1px solid rgba(246, 220, 185, .25);
  background: rgba(255, 252, 250, .05);
  font-size: .9rem;
  color: var(--oro-medio);
}
.punto-oro {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--degradado-oro);
  box-shadow: 0 0 12px rgba(228, 198, 146, .9);
}
.hero-titulo {
  margin-top: 24px;
  font-size: clamp(2.1rem, 1.3rem + 3.3vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--blanco);
  text-wrap: balance;
}
.hero-titulo .texto-oro { display: inline-block; font-style: italic; font-weight: 500; padding-right: .06em; }
.hero-bajada {
  margin-top: 20px;
  max-width: 52ch;
  font-size: clamp(1rem, .96rem + .25vw, 1.14rem);
  color: rgba(246, 220, 185, .9);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-firma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(246, 220, 185, .16);
  max-width: 460px;
}
.firma-nombre { font-family: var(--fuente-titulos); font-style: italic; font-size: 1.2rem; color: var(--oro-medio); }
.firma-titulos { font-size: .92rem; color: rgba(246, 220, 185, .78); }

@media (max-width: 480px) {
  .hero-ctas .btn { width: 100%; }
}

/* Visual del hero: foto opcional + ruta dorada */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin-inline: auto;
  aspect-ratio: 440 / 560;
}
.hero-foto {
  position: absolute;
  inset: 8% 10% 4%;
  border-radius: var(--radio-panel);
}
.hero-foto.tiene-imagen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58, 14, 29, .15), rgba(58, 14, 29, .65));
}
.hero-foto .media-img { transition-duration: 1.2s; }

.ruta { position: absolute; inset: 0; }
.ruta-svg { width: 100%; height: 100%; overflow: visible; }
.ruta-pista { fill: none; stroke: rgba(246, 220, 185, .18); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.ruta-trazo {
  fill: none;
  stroke: url(#grad-ruta);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dibujar 3.2s .4s var(--ease) forwards;
}
.ruta-puntos circle {
  fill: var(--vino-profundo);
  stroke: var(--oro-medio);
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: punto .5s var(--ease) forwards;
}
.ruta-puntos .p1 { animation-delay: .8s; }
.ruta-puntos .p2 { animation-delay: 1.55s; }
.ruta-puntos .p3 { animation-delay: 2.3s; }
.ruta-puntos .p4 { animation-delay: 3s; }

.parada {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radio-pill);
  font-size: clamp(.8rem, .7rem + .4vw, .95rem);
  font-weight: 450;
  color: var(--blanco);
  white-space: nowrap;
  opacity: 0;
  animation: parada .6s var(--ease) forwards;
}
.parada b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: .9rem;
  background: var(--degradado-oro);
  color: var(--vino-profundo);
}
/* Posiciones = coordenadas del SVG (viewBox 440×560) en porcentaje */
.parada-1 { left: 20.5%; top: 89.3%; --dx: 16px; transform: translate(var(--dx), -50%); animation-delay: .95s; }
.parada-2 { left: 75%; top: 69.6%; --dx: calc(-100% - 16px); transform: translate(var(--dx), -50%); animation-delay: 1.7s; }
.parada-3 { left: 25%; top: 46.4%; --dx: 16px; transform: translate(var(--dx), -50%); animation-delay: 2.45s; }
.parada-4 { left: 72.7%; top: 25%; --dx: calc(-100% - 16px); transform: translate(var(--dx), -50%); animation-delay: 3.15s; }

.ruta-cima {
  position: absolute;
  left: 50%;
  top: 11.8%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  animation: cima .9s 3.5s var(--ease) forwards, brillo 4s 4.4s ease-in-out infinite;
}
.monograma-cima { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; }
.monograma-cima .k-tipografica { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); }

@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes punto { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes parada {
  from { opacity: 0; transform: translate(var(--dx), calc(-50% + 10px)); }
  to { opacity: 1; transform: translate(var(--dx), -50%); }
}
@keyframes cima { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes brillo {
  0%, 100% { box-shadow: var(--sombra-vidrio), 0 0 40px -10px rgba(228, 198, 146, .35); }
  50% { box-shadow: var(--sombra-vidrio), 0 0 70px -6px rgba(228, 198, 146, .7); }
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 64px; }
}

/* ---------- 10. Mi historia ---------- */
.historia-grid { display: grid; gap: 48px; align-items: start; }
.retrato-marco {
  margin: 0;
  padding: 14px;
  border-radius: var(--radio-panel);
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}
.retrato { border-radius: 20px; }
.retrato .marcador::after { border-radius: 14px; }
.retrato-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 14px 8px 4px;
  font-size: .9rem;
  color: var(--tinta-suave);
}
.retrato-nombre { font-family: var(--fuente-titulos); font-style: italic; font-size: 1.1rem; color: var(--vino); }

.cita-grande { margin: 20px 0 0; padding: 0; position: relative; }
.cita-grande p {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.65rem);
  line-height: 1.4;
  color: var(--vino-suave);
  max-width: 30ch;
  text-wrap: balance;
}
.relato { margin-top: 22px; display: grid; gap: 16px; max-width: var(--medida); color: var(--tinta); }
.relato-prueba {
  padding: 18px 22px;
  border-radius: var(--radio-tarjeta);
  background: rgba(255, 255, 255, .55);
  border-left: 3px solid var(--oro);
}
.historia .chips { margin-top: 28px; }

.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(211, 174, 122, .45);
}
.cifras div { display: flex; flex-direction: column-reverse; gap: 4px; }
.cifras dd { margin: 0; font-family: var(--fuente-titulos); font-weight: 500; font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.3rem); line-height: 1; color: var(--vino); }
.cifras dt { font-size: .88rem; line-height: 1.35; color: var(--tinta-suave); }
.formacion { margin-top: 24px; font-size: .95rem; color: var(--tinta-suave); font-style: italic; }

@media (min-width: 960px) {
  .historia-grid { grid-template-columns: 5fr 7fr; gap: 80px; }
  .retrato-marco { position: sticky; top: 110px; }
}

/* ---------- 11. El método ---------- */
.marca-metodo {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--oro-medio);
}
.etapas-wrap { position: relative; }
.linea-etapas {
  position: absolute;
  left: 26px;
  top: 50px;
  bottom: 60px;
  width: 2px;
  background: rgba(246, 220, 185, .16);
  border-radius: 2px;
}
.linea-relleno {
  position: absolute;
  inset: 0;
  background: var(--degradado-oro);
  box-shadow: 0 0 16px rgba(228, 198, 146, .6);
  transform-origin: top;
  transform: scaleY(var(--progreso, 0));
}
.etapas { display: grid; gap: 20px; }
.etapa {
  margin-left: 70px;
  padding: 22px 22px 24px;
  border-radius: var(--radio-tarjeta);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.etapa h3 { font-size: 1.22rem; color: var(--blanco); }
.etapa p { margin-top: 8px; font-size: .95rem; color: rgba(246, 220, 185, .86); }
.etapa-num {
  position: absolute;
  left: -70px;
  top: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  color: var(--oro-medio);
  background: var(--vino-profundo);
  border: 1.5px solid rgba(211, 174, 122, .5);
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.etapa.encendida { border-color: rgba(246, 220, 185, .4); }
.etapa.encendida .etapa-num {
  background: var(--degradado-oro);
  color: var(--vino-profundo);
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(211, 174, 122, .14), 0 0 30px rgba(228, 198, 146, .55);
}
.metodo-cierre {
  margin-top: 36px;
  text-align: center;
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  color: var(--oro-medio);
}

@media (min-width: 960px) {
  .etapas { grid-template-columns: repeat(4, 1fr); }
  .etapa { margin-left: 0; padding-top: 92px; }
  .etapa-num { left: 26px; top: 24px; }
  .linea-etapas {
    left: 52px;
    right: auto;
    top: 49px;
    bottom: auto;
    width: calc(75% + 15px);
    height: 2px;
  }
  .linea-relleno { transform-origin: left; transform: scaleX(var(--progreso, 0)); }
}

/* ---------- 12. Servicios ---------- */
.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.servicio {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border-radius: var(--radio-tarjeta);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* Variación: algunas tarjetas con tinte vino para romper la repetición */
.servicio:nth-child(3n + 1) {
  background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(246, 220, 185, .35));
}
.servicio:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 30px 60px -30px rgba(86, 23, 44, .45); }
.icono-linea {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--oro-oscuro);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seccion-oscura .icono-linea { stroke: var(--oro-medio); }
.servicio h3 { margin-top: 18px; font-size: 1.2rem; color: var(--vino); }
.servicio p { margin-top: 8px; font-size: .95rem; color: var(--tinta-suave); flex: 1; }
.enlace-servicio {
  align-self: flex-start;
  margin-top: 22px;
  padding: 4px 0;
  font-weight: 500;
  color: var(--vino);
  text-decoration: none;
  background: linear-gradient(var(--oro), var(--oro)) left bottom / 100% 1.5px no-repeat;
  transition: background-size .3s var(--ease);
}
.enlace-servicio:hover { background-size: 40% 1.5px; }

/* ---------- 13. Reconocimientos y prensa ---------- */
.premios { display: grid; gap: 24px; }
.premio {
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--radio-panel);
}
.premio-anio {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--oro-medio);
  background: var(--degradado-oro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.premio h3 { margin-top: 14px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); color: var(--blanco); max-width: 22ch; }
.premio-org { margin-top: 8px; color: rgba(246, 220, 185, .82); }
.enlace-oro {
  display: inline-block;
  margin-top: 22px;
  padding: 4px 0;
  color: var(--oro-medio);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 198, 146, .5);
  transition: color .2s, border-color .2s;
}
.enlace-oro:hover { color: var(--oro-claro); border-color: var(--oro-claro); }
@media (min-width: 800px) { .premios { grid-template-columns: 1fr 1fr; } }

.prensa { margin-top: clamp(44px, 6vw, 68px); }
.prensa-titulo { text-align: center; font-size: .95rem; color: rgba(246, 220, 185, .75); margin-bottom: 22px; }
.carrusel-prensa {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.prensa-pista {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: desplazar 60s linear infinite;
}
.carrusel-prensa:hover .prensa-pista, .carrusel-prensa:focus-within .prensa-pista { animation-play-state: paused; }
.prensa-pista li {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: rgba(228, 198, 146, .82);
  white-space: nowrap;
}
.prensa-pista a { text-decoration: none; border-bottom: 1px solid rgba(228, 198, 146, .35); }
.prensa-pista a:hover { color: var(--oro-claro); }
.prensa-pista img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: .75; }
@keyframes desplazar { to { transform: translateX(-50%); } }

.eventos { margin-top: clamp(56px, 8vw, 88px); }
.eventos-titulo { text-align: center; font-size: 1.5rem; color: var(--blanco); margin-bottom: 24px; }
.eventos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.eventos-lista li { border-radius: var(--radio-tarjeta); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(246, 220, 185, .2); }
.eventos-lista img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 14. Testimonios ---------- */
.carrusel-controles { display: flex; gap: 10px; }
.carrusel-testimonios {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 30px;
  margin: -6px -4px 0;
  scrollbar-width: none;
}
.carrusel-testimonios::-webkit-scrollbar { display: none; }
.testimonio {
  flex: 0 0 min(88%, 440px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 24px;
  border-radius: var(--radio-panel);
}
@media (min-width: 1000px) {
  .testimonio { flex-basis: calc((100% - 40px) / 3); }
}
.testimonio::after {
  content: '“';
  position: absolute;
  top: 6px;
  right: 24px;
  font-family: var(--fuente-titulos);
  font-size: 6rem;
  line-height: 1;
  color: rgba(211, 174, 122, .4);
  pointer-events: none;
}
.testimonio blockquote { margin: 0; flex: 1; }
.testimonio blockquote p {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--vino);
}
.testimonio-autor { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.testimonio-foto {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--oro);
}
.testimonio-inicial {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  color: var(--oro-claro);
  background: linear-gradient(160deg, var(--vino-suave), var(--vino-profundo));
}
.testimonio-autor strong { display: block; font-weight: 500; color: var(--tinta); }
.testimonio-autor div span { font-size: .9rem; color: var(--tinta-suave); }

/* ---------- 15. Blog en la landing ---------- */
.blog-rejilla { display: grid; gap: 20px; }
.tarjeta-post {
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--marfil);
  border: 1px solid rgba(211, 174, 122, .3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tarjeta-post:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(86, 23, 44, .45); }
.tarjeta-post .portada { aspect-ratio: 16 / 9; }
.tarjeta-post-cuerpo { padding: 20px 22px 24px; display: grid; gap: 8px; }
.tarjeta-post-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .85rem; color: var(--tinta-suave); }
.tarjeta-post-cat { color: var(--oro-oscuro); font-weight: 500; }
.tarjeta-post h3 { font-size: 1.15rem; color: var(--vino); }
.tarjeta-post p { color: var(--tinta-suave); font-size: .98rem; }
.tarjeta-post.destacada h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.etiqueta-exclusivo {
  justify-self: start;
  padding: 2px 10px;
  border-radius: var(--radio-pill);
  font-size: .8rem;
  background: var(--vino);
  color: var(--oro-claro);
}

@media (min-width: 900px) {
  .blog-rejilla { grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(3, auto); }
  .blog-rejilla > .destacada, .blog-rejilla > .esqueleto-grande { grid-row: 1 / span 3; }
  .blog-rejilla > .tarjeta-post:not(.destacada) { flex-direction: row; }
  .blog-rejilla > .tarjeta-post:not(.destacada) .portada { flex: 0 0 38%; aspect-ratio: auto; min-height: 140px; }
}

/* Skeletons de carga */
.esqueleto {
  min-height: 150px;
  border-radius: var(--radio-tarjeta);
  background: linear-gradient(100deg, rgba(211, 174, 122, .12) 20%, rgba(211, 174, 122, .26) 40%, rgba(211, 174, 122, .12) 60%) 0 0 / 250% 100%;
  animation: brillo-esqueleto 1.6s linear infinite;
}
.esqueleto-grande { min-height: 380px; }
@keyframes brillo-esqueleto { to { background-position: -250% 0; } }

/* Estado vacío con dirección */
.estado-vacio {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(36px, 6vw, 60px) 24px;
  border-radius: var(--radio-panel);
  text-align: center;
}
.estado-vacio .marcador-k { font-size: 3.2rem; }
.estado-vacio h3 { font-size: 1.4rem; color: var(--vino); }
.estado-vacio p { max-width: 48ch; color: var(--tinta-suave); }
.estado-vacio .btn { margin-top: 8px; }

/* ---------- 16. Comunidad ---------- */
.comunidad-grid { display: grid; gap: 40px; align-items: center; }
.recursos { display: grid; gap: 20px; }
.recurso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  border-radius: var(--radio-tarjeta);
}
.recurso h3 { margin-top: 14px; font-size: 1.22rem; color: var(--blanco); }
.recurso p { margin: 10px 0 22px; color: rgba(246, 220, 185, .86); flex: 1; }
@media (min-width: 700px) { .recursos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .comunidad-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; } }

/* ---------- 17. Contacto y formularios ---------- */
.contacto-grid { display: grid; gap: 40px; align-items: start; }
.contacto-directo { display: grid; gap: 10px; margin-top: 28px; }
.contacto-directo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vino);
  text-decoration: none;
  font-weight: 450;
}
.contacto-directo a:hover { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; }
.contacto-directo svg { width: 22px; height: 22px; fill: none; stroke: var(--oro-oscuro); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aviso-legal-corto { margin-top: 28px; font-size: .88rem; color: var(--tinta-suave); max-width: 46ch; }

.formulario-marco { padding: clamp(20px, 3.5vw, 36px); border-radius: var(--radio-panel); }
.formulario { display: grid; gap: 16px; }
.campos-2 { display: grid; gap: 16px; }
@media (min-width: 620px) { .campos-2 { grid-template-columns: 1fr 1fr; } }

.campo { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo label, .campo legend { font-size: .9rem; font-weight: 500; color: var(--tinta); padding: 0; }
.campo legend { margin-bottom: 8px; }
.opcional { font-weight: 300; color: var(--tinta-suave); }

.formulario input:not([type='checkbox']):not([type='radio']),
.formulario select,
.formulario textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 15px;
  font-size: 1rem; /* 16px evita el zoom en iPhone */
  color: var(--tinta);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(107, 75, 85, .28);
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  appearance: none;
}
.formulario textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.formulario select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356172C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible {
  outline: none;
  border-color: var(--oro-oscuro);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(211, 174, 122, .35);
}
.formulario [aria-invalid='true'] { border-color: var(--error) !important; }
.error { min-height: 0; font-size: .87rem; color: var(--error); }
.error:empty { display: none; }
.contador { justify-self: end; font-size: .8rem; color: var(--tinta-suave); }

.chips-seleccion { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opcion { position: relative; }
.chip-opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-opcion span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radio-pill);
  font-size: .92rem;
  border: 1px solid rgba(86, 23, 44, .25);
  background: rgba(255, 255, 255, .6);
  color: var(--vino);
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip-opcion input:checked + span { background: var(--vino); border-color: var(--vino); color: var(--oro-claro); }
.chip-opcion input:checked + span::before { content: '✓'; font-size: .85em; }
.chip-opcion input:focus-visible + span { outline: 2px solid var(--vino); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(211, 174, 122, .45); }

.segmentado {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(107, 75, 85, .22);
}
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentado span { display: block; padding: 9px 18px; border-radius: var(--radio-pill); font-size: .95rem; color: var(--tinta-suave); transition: background-color .2s, color .2s; }
.segmentado input:checked + span { background: var(--vino); color: var(--oro-claro); }
.segmentado input:focus-visible + span { outline: 2px solid var(--vino); outline-offset: 2px; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--tinta); cursor: pointer; }
.check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--vino); cursor: pointer; }
.check a { color: var(--vino); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* Honeypot fuera de la vista */
.trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.exito-form { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 12px 0; outline: none; animation: entrar .5s var(--ease); }
.exito-form h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); color: var(--vino); }
.exito-form p { max-width: 44ch; color: var(--tinta-suave); }
.exito-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.exito-check { width: 76px; height: 76px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.exito-check circle { stroke: var(--oro); stroke-width: 2; stroke-dasharray: 190; stroke-dashoffset: 190; animation: trazo .8s var(--ease) forwards; }
.exito-check path { stroke: var(--vino); stroke-width: 3.5; stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazo .5s .6s var(--ease) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

@media (min-width: 1000px) {
  .contacto-grid { grid-template-columns: 5fr 7fr; gap: 64px; }
  .contacto-intro { position: sticky; top: 110px; }
}

/* ---------- 18. Pie ---------- */
.pie {
  position: relative;
  padding: clamp(52px, 7vw, 80px) 0 calc(28px + env(safe-area-inset-bottom));
  background: radial-gradient(90% 70% at 85% 0%, rgba(122, 42, 69, .5), transparent 60%), var(--vino-profundo);
  color: rgba(246, 220, 185, .85);
}
.pie-grid { display: grid; gap: 40px; }
.pie-logo { width: auto; min-height: 44px; }
.pie-logo.tiene-imagen { width: 150px; aspect-ratio: 1; }
.pie-logo .media-img { object-fit: contain; }
.pie-tagline { margin-top: 12px; font-family: var(--fuente-titulos); font-style: italic; color: var(--oro-medio); }
.pie-texto { margin-top: 12px; max-width: 42ch; font-size: .95rem; }
.sello-6sgs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--radio-pill);
  border: 1px solid rgba(254, 252, 251, .16);
  font-size: .85rem;
  color: var(--sgs-blanco);
}
.sello-punto {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--sgs-azul) 0 50%, var(--sgs-coral) 50% 75%, var(--sgs-blanco) 75%);
}
.pie-col { display: grid; align-content: start; gap: 10px; }
.pie-col h2 { font-size: 1.1rem; color: var(--oro-medio); margin-bottom: 6px; }
.pie-col a { text-decoration: none; width: fit-content; }
.pie-col a:hover { color: var(--blanco); }
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(246, 220, 185, .25);
  background: rgba(255, 252, 250, .05);
  transition: background-color .2s, border-color .2s;
}
.redes a:hover { background: rgba(255, 252, 250, .12); border-color: var(--oro); }
.redes svg { width: 20px; height: 20px; fill: none; stroke: var(--oro-medio); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pie-tienda { margin-top: 8px; font-size: .95rem; }
.pie-legal {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 220, 185, .14);
  display: grid;
  gap: 8px;
  font-size: .85rem;
  color: rgba(246, 220, 185, .72);
}
.pie-bajo { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.pie-bajo a { text-decoration-color: rgba(211, 174, 122, .5); text-underline-offset: 3px; }
@media (min-width: 800px) { .pie-grid { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- 19. WhatsApp flotante y toasts ---------- */
.whatsapp-flotante {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 55;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(58, 14, 29, .6);
  transition: transform .3s var(--ease);
}
.whatsapp-flotante:hover { transform: scale(1.06); }
.whatsapp-flotante svg { width: 28px; height: 28px; fill: var(--oro-medio); }

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 150;
  display: grid;
  gap: 10px;
  width: min(92vw, 440px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radio-tarjeta);
  background: rgba(58, 14, 29, .85);
  color: var(--oro-claro);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.visible { opacity: 1; transform: none; }
.toast-icono { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--degradado-oro); }
.toast-error .toast-icono { background: var(--sgs-coral); }
.toast-info .toast-icono { background: var(--oro-claro); }
.toast-texto { flex: 1; }
.toast-accion {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--radio-pill);
  border: 1px solid rgba(246, 220, 185, .4);
  background: transparent;
  color: var(--oro-medio);
  font-weight: 500;
  cursor: pointer;
}

/* ---------- 20. Revelado e inclinación 3D ---------- */
.js [data-revelar] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-revelar='izquierda'] { transform: translateX(-28px); }
.js [data-revelar='subir'] { transform: translateY(28px) scale(.98); }
.js [data-revelar].revelado { opacity: 1; transform: none; }

[data-inclinar] { transform-style: preserve-3d; will-change: transform; }

/* ---------- 21. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .orbe { animation: none !important; }
  .ruta-trazo { stroke-dashoffset: 0; }
  .ruta-puntos circle, .parada, .ruta-cima { opacity: 1; }
  .ruta-cima { transform: translate(-50%, -50%); }
  .halo { display: none; }
  .prensa-pista { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 16px; }
  .carrusel-prensa { -webkit-mask: none; mask: none; }
  .js [data-revelar] { opacity: 1; transform: none; }
  [data-inclinar] { transform: none !important; }
}

/* ---------- 22. Páginas simples (legales y "muy pronto") ---------- */
.cabecera-simple {
  padding: calc(var(--nav-alto) + 70px + env(safe-area-inset-top)) 0 clamp(56px, 8vw, 90px);
}
.cabecera-simple .titulo-seccion { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); max-width: 22ch; }
.cabecera-simple .intro { margin-top: 14px; }
.nav-simple .nav-capsula { justify-content: space-between; }
.nav-simple .btn { margin-left: auto; }

.texto-legal { max-width: 760px; margin-inline: auto; }
.texto-legal h2 { margin: 44px 0 12px; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.8rem); color: var(--vino); }
.texto-legal p, .texto-legal li { color: var(--tinta); max-width: var(--medida); }
.texto-legal p + p { margin-top: 12px; }
.texto-legal ul { margin: 12px 0; padding-left: 1.2em; list-style: disc; display: grid; gap: 8px; }
.texto-legal li::marker { color: var(--oro-oscuro); }
.texto-legal a { color: var(--vino); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.texto-legal .aviso-destacado {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: var(--radio-tarjeta);
  background: rgba(255, 255, 255, .6);
  border-left: 3px solid var(--oro);
}
.fecha-legal { font-size: .92rem; color: var(--tinta-suave); }

.pronto {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 120px 0 80px;
}
.pronto-panel {
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 56px);
  border-radius: var(--radio-panel);
  display: grid;
  justify-items: center;
  gap: 16px;
}
.pronto-panel .marcador-k { font-size: 4.2rem; }
.pronto-panel h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.8rem); color: var(--blanco); }
.pronto-panel p { color: rgba(246, 220, 185, .88); }
.pronto-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ---------- 23. Logo real (monograma y logo completo) ---------- */
/* Todas las "K" tipográficas usan el monograma oficial como imagen */
.k-tipografica, .marcador-k, .carga-k, .onb-k {
  display: inline-block;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: url("../img/marca/monograma.webp") center / contain no-repeat;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  aspect-ratio: 1087 / 944;
}
.monograma .k-tipografica { width: 30px; transform: none; }
.monograma-cima .k-tipografica { width: 66%; }
.marcador-k { width: clamp(64px, 30cqi, 150px); }
.estado-vacio .marcador-k { width: 76px; }
.pronto-panel .marcador-k { width: 110px; }
.marcador { gap: 14px; }
.marcador-marca { font-size: .9rem; }
.monograma { border-color: rgba(246, 220, 185, .28); background: rgba(58, 14, 29, .35); }

.logo-pie { width: 150px; height: auto; }
.pie-logo { min-height: 0; }
.pie-logo .sin-imagen { position: static; }

/* ---------- 24. Iconos de apoyo ---------- */
.etapa-icono {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: rgba(228, 198, 146, .75);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.premio-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.premio-laurel { width: 52px; height: 52px; fill: none; stroke: var(--oro-medio); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

.historia .chip::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--oro-oscuro);
}

.cifra-icono { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--oro-oscuro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Qué pasa después de enviar el formulario */
.pasos-contacto { display: grid; gap: 14px; margin-top: 26px; }
.pasos-contacto li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.pasos-contacto .paso-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(211, 174, 122, .5);
}
.pasos-contacto svg { width: 22px; height: 22px; fill: none; stroke: var(--vino); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pasos-contacto strong { display: block; font-weight: 600; color: var(--vino); font-size: .98rem; }
.pasos-contacto span { font-size: .92rem; color: var(--tinta-suave); }

/* ---------- 25. Ajustes para celular ---------- */
@media (max-width: 640px) {
  .seccion-oscura, .seccion-clara, .seccion-blanca { padding-block: 56px; }
  .hero { min-height: auto; padding-bottom: 56px; padding-top: calc(var(--nav-alto) + 44px + env(safe-area-inset-top)); }
  .hero-grid { gap: 28px; }
  .hero-sello { font-size: .8rem; }
  .hero-titulo { margin-top: 18px; }
  .hero-visual { max-width: 330px; }
  .titulo-seccion { font-size: 1.7rem; }
  .cabecera-seccion { margin-bottom: 28px; }
  .intro { font-size: .98rem; }

  .historia-grid { gap: 32px; }
  .retrato-marco { max-width: 320px; padding: 10px; }
  .cita-grande p { font-size: 1.2rem; }
  .relato { font-size: .96rem; }
  .relato-prueba { padding: 14px 16px; }
  .chip { font-size: .8rem; padding: 5px 12px; }
  .cifras { gap: 10px; }
  .cifras dd { font-size: 1.6rem; }
  .cifras dt { font-size: .76rem; }

  .etapas { gap: 14px; }
  .etapa { margin-left: 58px; padding: 18px 18px 20px; }
  .etapa-num { left: -58px; top: 18px; width: 44px; height: 44px; font-size: 1.1rem; }
  .linea-etapas { left: 22px; top: 40px; }
  .etapa-icono { top: 16px; right: 16px; width: 24px; height: 24px; }
  .etapa h3 { padding-right: 30px; }

  .rejilla-servicios { gap: 14px; }
  .servicio { padding: 22px 20px 20px; }
  .servicio h3 { margin-top: 14px; }
  .enlace-servicio { margin-top: 14px; }

  .premios { gap: 16px; }
  .premio-anio { font-size: 2.2rem; }
  .premio-laurel { width: 42px; height: 42px; }

  .testimonio { flex-basis: 86%; padding: 26px 20px 20px; }
  .testimonio::after { font-size: 4.5rem; right: 16px; }

  .recurso { padding: 22px; }
  .formulario-marco { padding: 20px 16px; border-radius: 22px; }
  .chip-opcion span { font-size: .86rem; min-height: 38px; padding: 7px 13px; }
  .segmentado span { padding: 8px 14px; font-size: .9rem; }

  .pie-grid { gap: 30px; }
  .whatsapp-flotante { width: 52px; height: 52px; }
}

/* ---------- 26. Pantalla de bienvenida (splash) ---------- */
.con-splash, .con-splash body { overflow: hidden; }
.splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(122, 42, 69, .9), transparent 70%),
    radial-gradient(40% 40% at 50% 55%, rgba(211, 174, 122, .16), transparent 70%),
    var(--vino-profundo);
  transition: opacity .6s var(--ease), visibility .6s;
}
.splash.fuera { opacity: 0; visibility: hidden; }
.splash-logo {
  width: min(56vw, 250px);
  height: auto;
  opacity: 0;
  transform: scale(.94);
  filter: drop-shadow(0 0 30px rgba(228, 198, 146, .25));
  animation: splash-logo 1.1s .1s var(--ease) forwards;
  -webkit-mask: linear-gradient(110deg, #000 40%, rgba(0, 0, 0, .55) 50%, #000 60%) 150% 0 / 300% 100%;
  mask: linear-gradient(110deg, #000 40%, rgba(0, 0, 0, .55) 50%, #000 60%) 150% 0 / 300% 100%;
}
.splash-linea {
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: var(--degradado-oro);
  transform: scaleX(0);
  animation: splash-linea 1.2s .3s var(--ease) forwards;
}
@keyframes splash-logo {
  60% { opacity: 1; }
  to { opacity: 1; transform: none; -webkit-mask-position: -50% 0; mask-position: -50% 0; }
}
@keyframes splash-linea { to { transform: scaleX(1); } }