/* ===== Capa de diseño y movimiento (v2) — mantiene la paleta y el contenido ===== */
:root{
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --grad: linear-gradient(135deg, #C11F52 0%, #B3207F 100%);
  --ring: 0 0 0 3px rgba(193,31,82,.22);
  --shadow-sm: 0 1px 2px rgba(36,16,23,.06), 0 8px 24px -14px rgba(36,16,23,.25);
  --shadow-lg: 0 2px 4px rgba(36,16,23,.05), 0 30px 60px -28px rgba(140,21,105,.38);
}
html{ scroll-padding-top: 84px; }
body{ text-rendering: optimizeLegibility; font-feature-settings: "ss01","cv11"; }
::selection{ background: var(--rose-soft); color: var(--ink); }

/* Tipografía */
h1,h2,h3{ font-optical-sizing: auto; text-wrap: balance; }
h1{ letter-spacing: -0.022em; word-spacing: .08em; line-height: 1.04; }
h2{ letter-spacing: -0.02em; line-height: 1.1; }
p, .lede, .service-card p{ text-wrap: pretty; }
.hero h1{ font-size: clamp(2.7rem, 6.2vw, 5rem); font-weight: 450; }
.hero h1 em{
  font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, var(--rose) 10%, var(--fuchsia) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.trust-item strong, .about-stats strong{ font-variant-numeric: lining-nums tabular-nums; }

/* Barra de progreso de lectura */
.scroll-progress{
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--rose), var(--fuchsia));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* Cabecera */
header{
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  background: rgba(251,243,239,.72);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
header nav.wrap{ transition: padding .3s var(--ease-out); }
header.is-scrolled{ background: rgba(251,243,239,.92); box-shadow: 0 10px 30px -22px rgba(36,16,23,.45); }
header.is-scrolled nav.wrap{ padding-top: 9px; padding-bottom: 9px; }
.brand-logo{ transition: height .3s var(--ease-out); }
header.is-scrolled .brand-logo{ height: 38px; }
.nav-links{ border-radius: 0 0 18px 18px; box-shadow: 0 24px 40px -28px rgba(36,16,23,.4); }
.nav-links a{ position: relative; transition: color .2s, padding-left .25s var(--ease-out); }
.nav-links a:hover{ padding-left: 6px; }

/* Botones */
.btn{ transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s, border-color .2s, color .2s; will-change: transform; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: scale(.97); transition-duration: .08s; }
.btn-primary{
  background: var(--grad);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 26px -12px rgba(193,31,82,.65);
}
.btn-primary:hover{ background: linear-gradient(135deg,#A81848 0%,#9B1A6C 100%); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 30px -12px rgba(193,31,82,.7); }
.btn-ghost{ background: rgba(255,255,255,.6); }
.btn-ghost:hover{ background:#fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--rose); box-shadow: var(--ring); outline: none; }
.field input, .field select, .field textarea{ transition: border-color .2s, box-shadow .2s, background-color .2s; }

/* Hero */
.hero{ position: relative; isolation: isolate; overflow-x: clip; }
.hero::before, .hero::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; filter: blur(70px); opacity:.55; pointer-events:none;
}
.hero::before{ width: 520px; height: 520px; right: -140px; top: -120px; background: radial-gradient(circle, rgba(240,201,230,.9), transparent 70%); }
.hero::after{ width: 460px; height: 460px; left: -160px; bottom: -160px; background: radial-gradient(circle, rgba(243,201,214,.9), transparent 70%); }
.hero-card{ box-shadow: var(--shadow-lg); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.hero-card-quote{ border-radius: 0 14px 14px 0; }
.hero-card-link{ display:inline-flex; gap:6px; align-items:center; transition: gap .25s var(--ease-out); }
.hero-card-link:hover{ gap: 10px; text-decoration: none; }
.trust-strip{ box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); }
.trust-item{ transition: background-color .25s; }
.trust-item:hover{ background: var(--rose-pale); }

/* Entrada del hero (escalonada) */
@media (prefers-reduced-motion: no-preference){
  .js .hero .eyebrow, .js .hero h1, .js .hero .lede, .js .hero-ctas, .js .trust-strip{
    opacity: 0; transform: translateY(16px);
    animation: rise .8s var(--ease-out) forwards;
  }
  .js .hero .eyebrow{ animation-delay: .05s; }
  .js .hero h1{ animation-delay: .14s; }
  .js .hero .lede{ animation-delay: .26s; }
  .js .hero-ctas{ animation-delay: .36s; }
  .js .trust-strip{ animation-delay: .48s; }
  .js .hero-card{ animation: rise-card 1s var(--ease-out) .25s both; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
  @keyframes rise-card{ from{ opacity:0; transform: translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
  .hero-card-bg{ animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 70% 40%; }
  @keyframes kenburns{ from{ transform: scale(1); } to{ transform: scale(1.06); } }
}

/* Revelado al hacer scroll (curva ease-out, escalonado por --d) */
.reveal{
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.reveal.is-visible{ transition-delay: calc(var(--d, 0) * 70ms); }

/* Secciones */
.eyebrow{ letter-spacing: .14em; }
.section-head h2{ max-width: 22ch; margin-inline: auto; }
.section-head:not(.center) h2{ margin-inline: 0; max-width: 24ch; }
.services-subhead{ display:flex; align-items:center; gap:14px; }

/* Servicios */
.service-card{
  position: relative; overflow: hidden; border-radius: 20px; background:#fff;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s;
}
.service-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--rose), var(--fuchsia));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out);
}
.service-card::after{
  content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle, var(--rose-pale), transparent 70%); opacity:0; transition: opacity .4s;
  pointer-events:none;
}
.service-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.service-card:hover::before{ transform: scaleX(1); }
.service-card:hover::after{ opacity:1; }
.service-card h3{ font-weight: 500; letter-spacing: -.01em; }
.service-link{ display:inline-flex; align-items:center; gap:6px; transition: gap .25s var(--ease-out); text-decoration:none; }
.service-link:hover{ gap: 11px; text-decoration:none; }

/* Sobre mí */
.about-grid img, .about-photo img{ transition: transform .9s var(--ease-out); }
.about-grid > div:first-child{ overflow:hidden; border-radius: 22px; box-shadow: var(--shadow-lg); }
.about-grid > div:first-child:hover img{ transform: scale(1.03); }

/* Mitos */
.mitos-grid{ position: relative; }
@media (min-width: 821px){
  .mitos-grid::before{
    content:""; position:absolute; top: 34px; left: 16.6%; right: 16.6%; height: 0;
    border-top: 1.5px dashed rgba(193,31,82,.35); z-index:0;
  }
}
.mito-step{ position: relative; z-index:1; }
.mito-icon{
  background: linear-gradient(145deg,#fff,var(--rose-pale)); border: 1px solid var(--rose-soft);
  box-shadow: 0 10px 24px -14px rgba(193,31,82,.5); transition: transform .4s var(--ease-out), box-shadow .4s;
}
.mito-step:hover .mito-icon{ transform: translateY(-4px) scale(1.05); box-shadow: 0 18px 30px -14px rgba(193,31,82,.55); }

/* Testimonios y multimedia */
.testi-card{ border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s; }
.testi-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testi-empty, .media-panel > p:only-child, .media-panel .media-empty{
  border: 1px dashed rgba(193,31,82,.3); border-radius: 16px; padding: 22px 18px; background: rgba(255,255,255,.55);
  max-width: 460px; margin-inline:auto; color: var(--ink-soft);
}
.media-tab{ transition: transform .18s var(--ease-out), background-color .2s, color .2s, border-color .2s; }
.media-tab:active{ transform: scale(.96); }
.media-tab:not(.active):hover{ border-color: var(--rose); }

/* FAQ con apertura suave */
html{ interpolate-size: allow-keywords; }
.faq-item{ transition: background-color .25s; border-radius: 4px; }
.faq-item summary{ transition: color .2s, padding-left .3s var(--ease-out); cursor: pointer; }
.faq-item summary:hover{ color: var(--rose-dark); padding-left: 6px; }
.faq-item summary::after{ transition: transform .35s var(--ease-out), color .2s; }
.faq-item::details-content{
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size .35s var(--ease-out), opacity .3s var(--ease-out), content-visibility .35s allow-discrete;
}
.faq-item[open]::details-content{ block-size: auto; opacity: 1; }

/* Formulario */
.contact-grid form, .contact-grid .form-card, .testi-form-wrap{ box-shadow: var(--shadow-lg); }
.info-row .ico{ transition: transform .3s var(--ease-out), background-color .2s; }
.info-row:hover .ico{ transform: scale(1.08) rotate(-4deg); background: var(--rose-soft); }

/* Botón flotante */
.float-btn{ transition: transform .2s var(--ease-out), opacity .3s, box-shadow .25s; box-shadow: 0 14px 28px -12px rgba(193,31,82,.6); }
.float-btn:hover{ transform: translateY(-3px); }
.float-btn:active{ transform: scale(.94); }

/* Pie */
footer a{ transition: color .2s, opacity .2s; }
footer a:hover{ color:#fff; }

/* Móvil */
@media (max-width: 620px){
  .hero h1{ font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .service-card:hover{ transform:none; }
  .hero::before{ width:340px; height:340px; right:-160px; }
}
@media (hover: none){
  .service-card:hover, .testi-card:hover{ transform:none; box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .scroll-progress{ display:none; }
}

/* Cabecera móvil: el botón nunca se parte ni pisa el logo */
.nav-cta .btn{ white-space: nowrap; }
@media (max-width: 480px){
  .nav-cta .btn-sm{ padding: 9px 14px; font-size: .82rem; }
  .brand-logo{ height: 36px; }
  header.is-scrolled .brand-logo{ height: 32px; }
  .nav-cta{ gap: 8px; }
}

/* ===== Subpáginas de servicio y legales ===== */
.detail-body a.btn, .detail-cta a.btn{ color:#fff; text-decoration:none; }
.detail-body a.btn:hover{ color:#fff; }
.detail-hero{ padding-bottom: 8px; }
.detail-hero + *, .detail-hero ~ section{ scroll-margin-top: 90px; }
.detail-hero-art{ position: relative; }
.detail-hero-art img{ filter: drop-shadow(0 24px 34px rgba(193,31,82,.18)); }
@media (prefers-reduced-motion: no-preference){
  .detail-hero-art img{ animation: float-art 7s ease-in-out infinite; }
  @keyframes float-art{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
}
.detail-body{ font-size: 1.02rem; }
.detail-body h2{ letter-spacing: -.015em; }
.detail-list li{ transition: transform .25s var(--ease-out); }
.detail-list li:hover{ transform: translateX(3px); }
.detail-steps li::before{ box-shadow: 0 6px 14px -8px rgba(193,31,82,.6); }
.detail-cta{
  background: linear-gradient(160deg,#fff 0%, var(--rose-pale) 140%);
  box-shadow: var(--shadow-lg); border-radius: 22px;
}
.related-services a, .related-services .chip{
  transition: transform .2s var(--ease-out), background-color .2s, border-color .2s, color .2s;
}
.related-services a:hover{ transform: translateY(-2px); background:#fff; border-color: var(--rose); }
.related-services a:active{ transform: scale(.97); }
.breadcrumb a, nav[aria-label="Breadcrumb"] a{ transition: color .2s; }
footer .brand-logo{ filter: drop-shadow(0 0 0 transparent); }
/* 404 */
main.wrap > .brand-logo{ animation: none; }

/* ===== Publicaciones de redes (Instagram, TikTok, Facebook, Vimeo, X) ===== */
.media-grid{ align-items: start; }
.social-card{
  background: var(--enamel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.social-head{ padding: 14px 16px 0; }
.social-chip{
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rose-dark); background: var(--rose-pale); border-radius: 999px; padding: 4px 11px;
}
.social-body{ padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.social-title{ margin: 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; font-weight: 500; text-wrap: balance; }
.social-actions{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.social-open{ font-weight: 600; font-size: .9rem; color: var(--rose-dark); }
.social-frame{ display: block; width: 100%; border: 0; border-radius: 14px; background: var(--bg-alt); }

/* ===== Capa v3: lenguaje visual de la Agenda de cuidado en todo el sitio (sólo presentación) ===== */
:root{
  --grad: linear-gradient(135deg, #C11F52 0%, #C21E93 100%);
  --card-line: 1px solid rgba(36,16,23,.13);
  --shadow-sm: 0 1px 2px rgba(36,16,23,.05), 0 18px 40px -26px rgba(36,16,23,.34);
}
/* fondo más limpio: menos lavado y grano casi imperceptible */
body::before{ opacity: .55; }
body::after{ opacity: .02; }
.hero::before, .hero::after{ opacity: .32; }
/* cabecera nítida con filo inferior */
header{ background: rgba(251,243,239,.9); border-bottom: 1px solid rgba(36,16,23,.1); }
header.is-scrolled{ background: rgba(251,243,239,.96); }
/* botones */
.btn-primary:hover{ background: linear-gradient(135deg,#A81848 0%,#A21779 100%); }
.btn-ghost{ background:#fff; border-color: rgba(36,16,23,.16); }
.btn-ghost:hover{ border-color: var(--rose); color: var(--rose-dark); }
/* tarjetas: blancas, borde fino, radio amplio */
.service-card, .testi-card, .social-card, .trust-strip, .detail-cta, .hero-card-quote{ border: var(--card-line); }
.service-card, .testi-card, .social-card, .detail-cta{ border-radius: 22px; background:#fff; box-shadow: var(--shadow-sm); }
.detail-cta{ background: linear-gradient(160deg,#fff 0%, var(--rose-pale) 160%); }
.trust-strip{ background:#fff; }
.contact-grid form, .contact-grid .form-card, .testi-form-wrap{ border: var(--card-line); border-radius: 24px; background:#fff; box-shadow: var(--shadow-sm); }
.field input, .field select, .field textarea{ border-color: rgba(36,16,23,.16); background: var(--bg); }
.faq-item{ border-bottom-color: rgba(36,16,23,.13); }
/* etiquetas en mono */
.eyebrow, .social-chip, .badge{ font-family: var(--mono); text-transform: uppercase; }
.eyebrow{ font-size: .74rem; letter-spacing: .12em; }
.mito-icon{ border-color: rgba(193,31,82,.22); }
.media-tab{ background:#fff; }
.media-tab.active{ background: var(--grad); border-color: transparent; color:#fff; }
.related-services a{ background:#fff; border: var(--card-line); }

/* Enlace "Mi agenda" en la barra */
.nav-agenda{ display:inline-flex; align-items:center; gap:6px; }
.nav-new{
  font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; font-style: normal; font-weight: 500;
  background: var(--rose-pale); color: var(--rose-dark); border-radius: 99px; padding: 2px 7px; line-height: 1.4;
}
.nav-links a[aria-current="page"]{ color: var(--rose-dark); font-weight: 600; }

/* Tarjeta de la Agenda de cuidado en el inicio */
.agenda-promo{ padding-block: 56px; }
.agenda-promo .promo-card{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 34px; align-items:center;
  background: linear-gradient(135deg, var(--rose-pale), var(--fuchsia-soft)); border: var(--card-line); border-radius: 28px; padding: 40px;
  box-shadow: var(--shadow-sm);
}
.agenda-promo h2{ font-size: clamp(1.9rem,3.6vw,2.7rem); margin: 12px 0 14px; }
.promo-lead{ color: var(--ink-soft); max-width: 46ch; margin: 0; }
.promo-mods{ display:flex; gap:10px; flex-wrap:wrap; margin: 22px 0 26px; padding:0; list-style:none; }
.promo-mods li{ display:inline-flex; gap:8px; align-items:center; background:#fff; border: var(--card-line); border-radius:999px; padding:7px 14px; font-size:.88rem; }
.promo-mods svg, .promo-fine svg{ width:18px; height:18px; fill:none; stroke: var(--rose); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.promo-fine{ display:flex; gap:8px; align-items:center; font-size:.82rem; color: var(--ink-soft); margin: 14px 0 0; }
.promo-fine svg{ width:16px; height:16px; stroke:#17663F; }
.promo-peek{ background:#fff; border: var(--card-line); border-radius:22px; padding:22px; box-shadow: var(--shadow-sm); transform: rotate(1.2deg); }
.peek-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.peek-label{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--rose-dark); }
.peek-pill{ background: var(--rose); color:#fff; border-radius:999px; padding:4px 12px; font-size:.78rem; font-weight:600; }
.peek-title{ font-family: var(--display); font-size:1.35rem; margin: 12px 0 4px; }
.peek-sub{ color: var(--ink-soft); font-size:.86rem; margin:0; }
.peek-bar{ height:8px; border-radius:99px; background: var(--bg-alt); overflow:hidden; margin: 14px 0 8px; }
.peek-bar i{ display:block; height:100%; width:100%; background: linear-gradient(90deg,var(--rose),var(--fuchsia)); border-radius:99px; }
@media (max-width: 820px){
  .agenda-promo .promo-card{ grid-template-columns: minmax(0,1fr); padding: 26px; }
  .promo-peek{ transform:none; }
}

/* ---------- Visor integrado (video, foto y carrete) ---------- */
.sv{ position:relative; border-radius:16px; overflow:hidden; background:#1c0f16; }
.sv-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; outline-offset:-3px; }
.sv-track::-webkit-scrollbar{ display:none; }
.sv-slide{ flex:0 0 100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; background:#1c0f16; }
.sv-slide video, .sv-slide img{ display:block; width:100%; max-height:min(78vh,640px); object-fit:contain; background:#1c0f16; }
.sv-nav{ position:absolute; top:50%; translate:0 -50%; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.92); color:#7a1450; font-size:1.7rem; line-height:1; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.sv-nav:disabled{ opacity:0; pointer-events:none; }
.sv-prev{ left:10px; } .sv-next{ right:10px; }
.sv-count{ position:absolute; top:10px; right:10px; padding:4px 10px; border-radius:999px; background:rgba(28,15,22,.7); color:#fff; font:600 .75rem/1 var(--mono, monospace); letter-spacing:.04em; }
.sv-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.sv-dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.5); pointer-events:auto; cursor:pointer; }
.sv-dot.on{ background:#fff; width:18px; border-radius:6px; }
@media (hover:none){ .sv-nav{ width:34px; height:34px; font-size:1.4rem; } }
@media (prefers-reduced-motion:reduce){ .sv-track{ scroll-behavior:auto; } }