:root{
  --bg: #0b0f14;
  --card: #121821;
  --muted: #93a4b8;
  --text: #e9f0f6;
  --primary: #5eead4;     /* teal-200 */
  --primary-ink:#003c35;
  --accent: #a78bfa;      /* violet-300 */
  --ring: rgba(94,234,212,.35);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(167,139,250,.25), transparent 60%),
    radial-gradient(900px 500px at 120% 10%, rgba(94,234,212,.18), transparent 60%),
    var(--bg);
  line-height:1.6;
}

a { color: inherit; text-decoration: none; }

img, video{
  display:block;
  max-width:100%;
  height:auto;
  border-radius: calc(var(--radius) - 6px);
}

/* Layout */
.container{
  width:min(1150px, 92%);
  margin-inline:auto;
}

header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(11,15,20,.72), rgba(11,15,20,.35) 70%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:800;
  letter-spacing:.3px;
}

.brand-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 0 0 6px rgba(167,139,250,.12);
}

.cta-top{
  display:inline-flex;
  gap:.6rem;
  align-items:center;
  padding:.7rem 1rem;
  border-radius:999px;
  background: linear-gradient(135deg,var(--primary), var(--accent));
  color: #071314;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(94,234,212,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-top:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(167,139,250,.25);
}

.cta-top svg{
  width:18px;
  height:18px;
}

/* Hero */
.hero{
  padding: clamp(56px, 6vw, 96px) 0 42px;
  position:relative;
}

.grid{
  display:grid;
  gap: clamp(22px, 3vw, 36px);
  grid-template-columns: 1.1fr .9fr;
}

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 28px);
}

.eyebrow{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(7,19,19,.45);
  color: var(--primary);
  font-size:.88rem;
  font-weight:600;
}

.eyebrow .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--primary);
}

h1{
  font-size: clamp(30px, 4.2vw, 54px);
  line-height:1.08;
  margin: 12px 0 8px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.lead{
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 18px);
  max-width: 62ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding: .9rem 1.15rem;
  border-radius: 14px;
  background: linear-gradient(135deg,var(--primary),#7dd3fc);
  color:#041312;
  font-weight:800;
  border:none;
  cursor:pointer;
  box-shadow: 0 10px 30px var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: 0 16px 40px var(--ring);
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem 1.15rem;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  font-weight:700;
  transition: background .2s ease, transform .2s ease;
}

.btn-ghost:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-2px);
}

/* Media panel */
.media{
  position:relative;
  isolation:isolate;
  background: linear-gradient(180deg, rgba(94,234,212,.08), rgba(167,139,250,.06));
  border:1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: clamp(12px, 1.8vw, 18px);
  box-shadow: var(--shadow);
}

.media::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(600px 120px at 20% 0%, rgba(94,234,212,.15), transparent 60%);
  mix-blend: screen;
}

.badge{
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  font-size:.84rem;
  padding:.45rem .7rem;
  border-radius:999px;
  background: rgba(7,19,19,.6);
  border:1px solid rgba(255,255,255,.12);
}

/* Trust strip */
.trust{
  margin-top: 22px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size:.95rem;
}

.trust .stars{
  display:inline-flex;
  gap:2px;
}

.stars svg{
  width:16px;
  height:16px;
}

/* Testimonials */
.testimonials{
  margin-top: clamp(18px, 2.4vw, 26px);
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px){
  .testimonials{ grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 650px){
  .testimonials{ grid-template-columns: 1fr; }
}

.t-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding:16px;
  box-shadow: var(--shadow);
  min-height: 150px;
}

.t-head{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:.35rem;
}

.avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}

.t-name{
  font-weight:700;
}

.t-role{
  color: var(--muted);
  font-size:.9rem;
}

.t-quote{
  color: #d7e5ef;
}

/* A11y focus */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.cta-top:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Helper */
.whatsapp{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}


/* ===========================
   SOBRE MÍ / ACERCA DE
   =========================== */

.about{
  padding: clamp(52px, 7vw, 90px) 0;
}

.about-grid{
  display:grid;
  gap: clamp(26px, 3.5vw, 40px);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
  align-items:flex-start;
}

@media (max-width: 900px){
  .about-grid{
    grid-template-columns: 1fr;
  }
}

.about-media{
  position:relative;
}

.about-photo-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow);
  padding: 18px 18px 20px;
}

.about-photo-wrapper{
  position:relative;
  border-radius: calc(var(--radius) - 4px);
  overflow:hidden;
}

.about-photo{
  width:100%;
  height:auto;
  object-fit:cover;
  max-height: 420px;
}

.about-photo-pill{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:.4rem .75rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  background: rgba(7,19,19,.8);
  border:1px solid rgba(255,255,255,.2);
  color: var(--primary);
  backdrop-filter: blur(6px);
}

.about-identity{
  margin-top: 14px;
}

.about-name{
  margin:0;
  font-size: 1.4rem;
  font-weight: 700;
}

.about-title{
  margin:3px 0 0;
  font-size:.96rem;
  color: var(--muted);
}

.about-location{
  margin:4px 0 0;
  font-size:.9rem;
  color: rgba(233,240,246,.9);
}

.about-tags{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag{
  font-size:.78rem;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  background: rgba(15,23,42,.7);
  color:#e5f5ff;
}

/* Columna de contenido */

.about-content{
  max-width: 720px;
}

.about-heading{
  margin: 10px 0 14px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height:1.25;
  font-weight: 800;
}

.about-heading-highlight{
  color: var(--primary);
}

.about-block{
  margin-top: 18px;
  padding-top: 12px;
  border-top:1px solid rgba(148,163,184,.32);
}

.about-subheading{
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: #e5edf5;
}

.about-list{
  margin: 6px 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size:.95rem;
}

.about-list li{
  margin-bottom: 4px;
}

.about-text{
  margin: 6px 0;
  color: var(--muted);
  font-size:.96rem;
}

/* Ajuste de la eyebrow dentro de about */
.about-content .eyebrow{
  margin-bottom: 6px;
}


/* ===========================
   SERVICIOS
   =========================== */

.services{
  padding: clamp(52px, 7vw, 90px) 0;
}

.services-header{
  max-width: 760px;
  margin-inline:auto;
  text-align:left;
}

@media (max-width: 768px){
  .services-header{
    text-align:left;
  }
}

.services-heading{
  margin: 10px 0 10px;
  font-size: clamp(24px, 3.1vw, 34px);
  line-height:1.25;
  font-weight: 800;
}

.services-heading-highlight{
  color: var(--primary);
}

.services-intro{
  margin: 0;
  color: var(--muted);
  font-size:.96rem;
}

.services-layout{
  margin-top: clamp(26px, 3.5vw, 38px);
  display:grid;
  gap: clamp(24px, 3.3vw, 34px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  align-items:flex-start;
}

@media (max-width: 980px){
  .services-layout{
    grid-template-columns: 1fr;
  }
}

.services-subheading{
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color:#e5edf5;
}

.services-note{
  margin: 4px 0 12px;
  color: var(--muted);
  font-size:.9rem;
}

/* Cards de tipos de terapia */

.service-grid{
  margin-top: 8px;
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 880px){
  .service-grid{
    grid-template-columns: 1fr;
  }
}

.service-card{
  position:relative;
  border-radius: 16px;
  border:1px solid rgba(148,163,184,.45);
  background: radial-gradient(circle at top left, rgba(94,234,212,.09), transparent 55%),
              radial-gradient(circle at bottom right, rgba(167,139,250,.08), transparent 60%),
              rgba(15,23,42,.9);
  padding: 14px 14px 15px;
  box-shadow: 0 10px 30px rgba(15,23,42,.65);
  overflow:hidden;
}

.service-tag{
  position:absolute;
  right:10px;
  top:10px;
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
  color:#022c22;
  background: linear-gradient(135deg,var(--primary),#7dd3fc);
}

.service-title{
  margin:0 0 5px;
  font-size: .98rem;
  font-weight: 600;
}

.service-text{
  margin:0;
  font-size:.9rem;
  color: var(--muted);
}

/* Modalidades y precios */

.services-modalities{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.modality-card{
  border-radius: 16px;
  border:1px solid rgba(148,163,184,.5);
  background: rgba(15,23,42,.92);
  padding: 14px 14px 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,.65);
}

.modality-online{
  background:
    radial-gradient(circle at top left, rgba(94,234,212,.18), transparent 60%),
    rgba(15,23,42,.95);
  border-color: rgba(94,234,212,.7);
}

.modality-presential{
  background:
    radial-gradient(circle at top right, rgba(167,139,250,.18), transparent 60%),
    rgba(15,23,42,.95);
}

.modality-label{
  font-size:.9rem;
  font-weight:600;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:.4rem;
}

.modality-label.secondary{
  color: var(--accent);
}

.modality-badge{
  font-size:.7rem;
  padding:.1rem .45rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
}

.modality-text{
  margin: 2px 0 6px;
  color: var(--muted);
  font-size:.9rem;
}

.modality-list{
  margin: 4px 0 0;
  padding-left: 1.1rem;
  font-size:.88rem;
  color: rgba(209,213,219,.95);
}

.modality-list li{
  margin-bottom: 3px;
}

/* Pricing card */

.pricing-card{
  border-radius: 16px;
  border:1px solid rgba(148,163,184,.5);
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.9));
  padding: 14px 14px 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,.65);
}

.pricing-heading{
  margin:0 0 4px;
  font-size:1rem;
  font-weight:600;
}

.pricing-text{
  margin: 4px 0;
  font-size:.9rem;
  color: var(--muted);
}

.pricing-cta{
  margin-top: 8px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
}

.pricing-footnote{
  margin: 6px 0 0;
  font-size:.8rem;
  color: rgba(148,163,184,.95);
}


/* ===========================
   AGENDA / RESERVAR CITA
   =========================== */

.booking{
  padding: clamp(52px, 7vw, 90px) 0;
}

.booking-layout{
  display:grid;
  gap: clamp(26px, 3.5vw, 40px);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  align-items:flex-start;
}

@media (max-width: 980px){
  .booking-layout{
    grid-template-columns: 1fr;
  }
}

.booking-heading{
  margin: 10px 0 10px;
  font-size: clamp(24px, 3.1vw, 34px);
  line-height:1.25;
  font-weight: 800;
}

.booking-heading-highlight{
  color: var(--primary);
}

.booking-text{
  margin: 0 0 10px;
  color: var(--muted);
  font-size:.95rem;
}

.booking-text-small{
  margin: 8px 0 6px;
  color: var(--muted);
  font-size:.9rem;
}

/* Widget Calendly */
.booking-widget{
  margin-top: 10px;
  border-radius: 16px;
  border:1px solid rgba(148,163,184,.4);
  background: rgba(15,23,42,.9);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,.7);
}

.booking-widget iframe{
  width:100%;
  min-height: 280px;
}

/* Formulario */

.booking-form-wrapper{
  max-width: 480px;
  margin-left:auto;
}

@media (max-width: 980px){
  .booking-form-wrapper{
    max-width: 100%;
    margin-left:0;
  }
}

.booking-form-card{
  border-radius: 18px;
  border:1px solid rgba(148,163,184,.55);
  background: radial-gradient(circle at top left, rgba(94,234,212,.16), transparent 60%),
              rgba(15,23,42,.97);
  padding: 18px 18px 20px;
  box-shadow: 0 10px 30px rgba(15,23,42,.7);
}

.booking-form-title{
  margin:0;
  font-size:1.1rem;
  font-weight:600;
}

.booking-form-subtitle{
  margin:4px 0 10px;
  font-size:.9rem;
  color: var(--muted);
}

.booking-form{
  margin-top:8px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.form-row{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px){
  .form-row{
    grid-template-columns: 1fr;
  }
}

label{
  font-size:.86rem;
  color: #e5edf5;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea{
  border-radius: 10px;
  border:1px solid rgba(148,163,184,.6);
  background: rgba(15,23,42,.95);
  padding: .55rem .7rem;
  color: var(--text);
  font-size:.9rem;
  font-family: inherit;
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input::placeholder,
textarea::placeholder{
  color: rgba(148,163,184,.85);
}

input:focus,
textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(94,234,212,.7);
  background: rgba(15,23,42,1);
}

textarea{
  resize: vertical;
  min-height: 110px;
}

.booking-form-note{
  margin: 4px 0 10px;
  font-size:.8rem;
  color: rgba(148,163,184,.95);
}

.booking-submit{
  width:100%;
  justify-content:center;
}


/* Errores de formulario */

.form-errors{
  display:none;
  margin-bottom:10px;
  border-radius:10px;
  border:1px solid rgba(248,113,113,.7);
  background: rgba(127,29,29,.65);
  padding:8px 10px;
  font-size:.82rem;
  color:#fee2e2;
}

.form-errors.active{
  display:block;
}

.form-errors ul{
  margin:4px 0 0 18px;
  padding:0;
}

.form-errors li{
  margin-bottom:2px;
}

input.input-error,
textarea.input-error{
  border-color: #f97373;
  box-shadow: 0 0 0 1px rgba(248,113,113,.6);
}


/* ===========================
   BLOG / RECURSOS
   =========================== */

.blog{
  padding: clamp(52px, 7vw, 90px) 0;
}

.blog-header{
  max-width: 780px;
  margin-inline:auto;
}

.blog-heading{
  margin: 10px 0 10px;
  font-size: clamp(24px, 3.1vw, 34px);
  line-height:1.25;
  font-weight: 800;
}

.blog-heading-highlight{
  color: var(--primary);
}

.blog-intro{
  margin:0;
  color: var(--muted);
  font-size:.95rem;
}

/* Carrusel */

.blog-carousel-wrapper{
  margin-top: clamp(22px, 3vw, 30px);
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:10px;
  align-items:stretch;
}

@media (max-width: 768px){
  .blog-carousel-wrapper{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:auto auto auto;
  }

  .blog-nav{
    order: -1;
  }
}

.blog-carousel{
  position:relative;
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
}

.blog-carousel::-webkit-scrollbar{
  height:6px;
}
.blog-carousel::-webkit-scrollbar-track{
  background: rgba(15,23,42,.85);
}
.blog-carousel::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.7);
  border-radius:999px;
}

.blog-nav{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  background: rgba(15,23,42,.96);
  color:#e5edf5;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.4rem;
  line-height:1;
  box-shadow: 0 10px 25px rgba(15,23,42,.7);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.blog-nav-disabled{
  opacity:.4;
  cursor:default;
}

.blog-nav:not(.blog-nav-disabled):hover{
  background: rgba(30,64,175,.9);
  transform: translateY(-1px);
}

/* Tarjetas */

.blog-card{
  flex: 0 0 min(280px, 80vw);
  scroll-snap-align:start;
  border-radius: 18px;
  border:1px solid rgba(148,163,184,.5);
  background: radial-gradient(circle at top left, rgba(94,234,212,.15), transparent 60%),
              radial-gradient(circle at bottom right, rgba(167,139,250,.15), transparent 65%),
              rgba(15,23,42,.95);
  box-shadow: 0 10px 30px rgba(15,23,42,.72);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color: inherit;
}

.blog-card-thumb{
  width:100%;
  height:160px;
  object-fit:cover;
}

.blog-card-body{
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.blog-card-type{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: rgba(190,242,255,.9);
}

.blog-card-title{
  font-size:.98rem;
  font-weight:600;
  margin:0;
}

.blog-card-excerpt{
  font-size:.86rem;
  color: var(--muted);
  margin:0;
}

.blog-card-meta{
  margin-top:4px;
  font-size:.76rem;
  color: rgba(148,163,184,.95);
}

/* Estado vacío / mensajes */

.blog-empty{
  font-size:.9rem;
  color: var(--muted);
  padding:10px 0;
}

.blog-status{
  margin-top:8px;
  font-size:.8rem;
  color: rgba(148,163,184,.9);
}

/* Detalle de blog */

.blog-detail{
  padding: clamp(52px, 7vw, 90px) 0;
}

.blog-detail-article{
  max-width: 780px;
}

.blog-detail-type{
  margin:0 0 4px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: rgba(190,242,255,.95);
}

.blog-detail-title{
  margin:0 0 6px;
  font-size: clamp(24px, 3.3vw, 34px);
  line-height:1.2;
  font-weight:800;
}

.blog-detail-meta{
  margin:0 0 12px;
  font-size:.85rem;
  color: var(--muted);
}

.blog-detail-thumb-wrapper{
  margin: 10px 0 14px;
}

.blog-detail-thumb{
  width:100%;
  max-height: 320px;
  object-fit:cover;
  border-radius: 16px;
}

.blog-detail-excerpt{
  font-size:.95rem;
  color: rgba(226,232,240,.95);
  margin:0 0 12px;
}

.blog-detail-body{
  font-size:.96rem;
  color: var(--muted);
  line-height:1.7;
}

.blog-detail-body p{
  margin-bottom:10px;
}


/* ===========================
   CÓMO FUNCIONA LA TERAPIA EN LÍNEA
   =========================== */

.how-online{
  padding: clamp(52px, 7vw, 90px) 0;
}

.how-layout{
  display:grid;
  gap: clamp(26px, 3.5vw, 40px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr);
  align-items:flex-start;
}

@media (max-width: 980px){
  .how-layout{
    grid-template-columns: 1fr;
  }
}

.how-heading{
  margin: 10px 0 8px;
  font-size: clamp(24px, 3.1vw, 34px);
  line-height:1.25;
  font-weight: 800;
}

.how-heading-highlight{
  color: var(--primary);
}

.how-intro{
  margin: 0 0 12px;
  color: var(--muted);
  font-size:.95rem;
}

/* Pasos */

.how-steps-list{
  list-style:none;
  margin: 10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.how-step{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:10px;
  align-items:flex-start;
  position:relative;
}

.how-step::before{
  content:"";
  position:absolute;
  left:17px;
  top:24px;
  bottom:-10px;
  width:2px;
  background: linear-gradient(to bottom, rgba(148,163,184,.8), transparent);
  pointer-events:none;
}

.how-step:last-child::before{
  display:none;
}

.how-step-index{
  width:34px;
  height:34px;
  border-radius:999px;
  background: radial-gradient(circle at top left, rgba(94,234,212,.3), transparent 60%),
              rgba(15,23,42,1);
  border:1px solid rgba(148,163,184,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.9rem;
  color:#e5edf5;
  box-shadow: 0 8px 20px rgba(15,23,42,.7);
}

.how-step-content{
  padding-bottom:8px;
}

.how-step-title{
  margin:0 0 4px;
  font-size:.98rem;
  font-weight:600;
}

.how-step-text{
  margin:0;
  font-size:.9rem;
  color: var(--muted);
}

/* Columna derecha: beneficios y requisitos */

.how-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.how-card{
  border-radius: 18px;
  border:1px solid rgba(148,163,184,.5);
  background: radial-gradient(circle at top left, rgba(94,234,212,.15), transparent 60%),
              rgba(15,23,42,.96);
  padding: 14px 14px 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,.7);
}

.how-card-secondary{
  background: radial-gradient(circle at top right, rgba(167,139,250,.18), transparent 60%),
              rgba(15,23,42,.96);
}

.how-side-heading{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:600;
  color:#e5edf5;
}

.how-list{
  margin:4px 0 0;
  padding-left: 1.1rem;
  font-size:.9rem;
  color: var(--muted);
}

.how-list li{
  margin-bottom:4px;
}

.how-note{
  margin:8px 0 0;
  font-size:.85rem;
  color: rgba(226,232,240,.95);
}


/* ===========================
   FOOTER / CONTACTO
   =========================== */

.footer{
  margin-top: clamp(60px, 8vw, 100px);
  padding-top: clamp(40px, 5vw, 70px);
  background: linear-gradient(
    180deg,
    rgba(15,23,42,0.95),
    #0b0f14 80%
  );
  border-top: 1px solid rgba(148,163,184,.3);
  color:#e2e8f0;
}

.footer-layout{
  display:grid;
  gap: clamp(26px, 3vw, 40px);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

@media (max-width: 900px){
  .footer-layout{
    grid-template-columns: 1fr;
  }
}

/* ------------------------- */
/* Columna izquierda         */
/* ------------------------- */

.footer-title{
  margin:0 0 10px;
  font-size: clamp(22px, 2.9vw, 32px);
  font-weight:800;
}

.footer-text{
  margin:0 0 14px;
  color: var(--muted);
  font-size:.95rem;
}

.footer-contact-list{
  list-style:none;
  padding:0;
  margin:0 0 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-contact-list li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
}

.footer-contact-list a{
  color:#94d2ff;
  text-decoration:none;
}

.footer-contact-list a:hover{
  text-decoration:underline;
}

/* Ubicación */
.footer-location{
  margin-top: 18px;
}

.footer-subtitle{
  margin:0 0 4px;
  font-size:1rem;
  font-weight:600;
}

.footer-text-location{
  margin:0;
  font-size:.9rem;
  color: var(--muted);
}

/* ------------------------- */
/* Formulario                */
/* ------------------------- */

.footer-form-card{
  border-radius: 18px;
  border:1px solid rgba(148,163,184,.5);
  background: radial-gradient(circle at top left, rgba(94,234,212,.15), transparent 60%),
              rgba(15,23,42,.96);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.7);
}

.footer-form-title{
  margin:0 0 10px;
  font-size:1.1rem;
  font-weight:600;
}

.footer-form .form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.footer-form input,
.footer-form textarea{
  border-radius: 10px;
  border:1px solid rgba(148,163,184,.6);
  background: rgba(8,12,21,.95);
  padding:.55rem .7rem;
  color:#e2e8f0;
  font-size:.9rem;
  outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}

.footer-form input:focus,
.footer-form textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(94,234,212,.7);
}

/* Botón */
.footer-submit{
  margin-top:6px;
  width:100%;
  justify-content:center;
}

/* ------------------------- */
/* Footer bottom             */
/* ------------------------- */

.footer-bottom{
  margin-top:30px;
  border-top:1px solid rgba(148,163,184,.25);
  padding:14px 0;
  text-align:center;
  color:rgba(200,210,225,.75);
  font-size:.85rem;
}


/* ===========================
   POLÍTICA DE PRIVACIDAD
   =========================== */

.policy-body{
  background:#0b0f14;
  color:#e2e8f0;
}

.policy-header{
  border-bottom:1px solid rgba(148,163,184,.25);
  padding:16px 0;
  background:rgba(15,23,42,.97);
}

.policy-header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.policy-back{
  color:#5eead4;
  text-decoration:none;
  font-size:.9rem;
}

.policy-back:hover{
  text-decoration:underline;
}

.policy{
  padding: clamp(60px, 8vw, 90px) 0;
  max-width:800px;
}

.policy-title{
  margin:0 0 10px;
  font-size:clamp(26px, 3.2vw, 38px);
  font-weight:800;
}

.policy-intro{
  margin:0 0 20px;
  font-size:1rem;
  color: var(--muted);
}

.policy-section{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(148,163,184,.3);
}

.policy-section h2{
  margin:0 0 8px;
  font-size:1.2rem;
  font-weight:600;
}

.policy-section p,
.policy-section ul{
  color: var(--muted);
  font-size:.95rem;
}

.policy-section ul{
  padding-left:1.2rem;
}

.policy-last-update{
  margin-top:30px;
  font-size:.85rem;
  color:rgba(148,163,184,.8);
}

/* ===========================
   EXTRAS: FAQ + DESCARGABLES
   =========================== */

.extras-body{
  background:#0b0f14;
  color:#e2e8f0;
}

.extras{
  padding: clamp(60px, 8vw, 90px) 0;
  max-width: 900px;
}

.extras-section{
  margin-bottom: clamp(32px, 4vw, 42px);
}

.extras-title{
  margin:8px 0 8px;
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:800;
}

.extras-subtitle{
  margin:8px 0 8px;
  font-size:clamp(22px, 3vw, 30px);
  font-weight:700;
}

.extras-intro{
  margin:0 0 14px;
  font-size:.96rem;
  color: var(--muted);
}

/* FAQ */

.faq-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.faq-item{
  border-radius:14px;
  border:1px solid rgba(148,163,184,.4);
  background: rgba(15,23,42,.96);
  box-shadow:0 10px 25px rgba(15,23,42,.7);
  overflow:hidden;
}

.faq-question{
  width:100%;
  text-align:left;
  padding:10px 12px;
  background:transparent;
  border:none;
  outline:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  color:#e2e8f0;
  font-size:.95rem;
}

.faq-icon{
  font-weight:700;
  font-size:1.2rem;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 12px;
  transition:max-height .2s ease-out;
}

.faq-answer p{
  margin:0 0 10px;
  font-size:.9rem;
  color: var(--muted);
}

/* Descargables / tests */

.extras-downloads{
  border-top:1px solid rgba(148,163,184,.35);
  padding-top:22px;
}

.downloads-grid{
  margin-top:10px;
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 780px){
  .downloads-grid{
    grid-template-columns: 1fr;
  }
}

.download-card{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.45);
  background: radial-gradient(circle at top left, rgba(94,234,212,.15), transparent 60%),
              rgba(15,23,42,.97);
  padding:12px 14px 14px;
  box-shadow:0 10px 25px rgba(15,23,42,.75);
}

.download-title{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:600;
}

.download-text{
  margin:0 0 10px;
  font-size:.9rem;
  color: var(--muted);
}

.download-btn{
  font-size:.86rem;
  padding:.45rem .8rem;
}

.extras-note{
  margin-top:12px;
  font-size:.85rem;
  color:rgba(148,163,184,.9);
}


/* ===========================
   NAV / MENÚ PRINCIPAL
   =========================== */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(11,15,20,.9), rgba(11,15,20,.5) 70%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  gap:14px;
}

/* Menú y enlaces */

.nav-menu{
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:14px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:.9rem;
}

.nav-links a{
  text-decoration:none;
  color:rgba(226,232,240,.92);
  padding:6px 0;
  position:relative;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width .2s ease;
}

.nav-links a:hover::after{
  width:100%;
}

/* Extra links más suaves visualmente */

.nav-link-extra a{
  opacity:.8;
  font-size:.85rem;
}

/* CTA dentro del menú */

.nav-cta{
  margin-left:4px;
  flex-shrink:0;
}

/* Hamburguesa (móvil) */

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.95);
  padding:0 7px;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  height:2px;
  border-radius:999px;
  background:#e5e7eb;
  transition:transform .2s ease, opacity .2s ease;
}

/* Estados al abrir */

.site-header.nav-open .nav-toggle span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.site-header.nav-open .nav-toggle span:nth-child(2){
  opacity:0;
}
.site-header.nav-open .nav-toggle span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* Responsive */

@media (max-width: 900px){
  .nav-menu{
    position:fixed;
    inset:54px 0 auto 0;
    padding:10px 16px 16px;
    background:rgba(11,15,20,.97);
    border-bottom:1px solid rgba(148,163,184,.3);
    box-shadow:0 12px 30px rgba(0,0,0,.7);
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .site-header.nav-open .nav-menu{
    display:flex;
  }

  .nav-links{
    flex-wrap:wrap;
    gap:10px 20px;
  }

  .nav-cta{
    width:100%;
    justify-content:center;
  }

  .nav-toggle{
    display:flex;
  }
}

/* ===========================
   HONORARIOS VERTICALES
   =========================== */

.fees-vertical{
  padding: clamp(52px, 7vw, 90px) 0;
}

.feesv-header{
  max-width:740px;
  margin-inline:auto;
  text-align:center;
}

.feesv-title{
  margin:10px 0;
  font-size:clamp(24px, 3.2vw, 34px);
  font-weight:800;
}

.feesv-intro{
  font-size:.95rem;
  color:var(--muted);
  margin:0 auto 20px;
  max-width:650px;
}

/* Tarjetas verticales */

.feesv-cards{
  margin-top:clamp(24px, 3vw, 32px);
  display:grid;
  gap:18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px){
  .feesv-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .feesv-cards{
    grid-template-columns: 1fr;
  }
}

.feesv-card{
  border-radius:20px;
  border:1px solid rgba(148,163,184,.45);
  background:
    radial-gradient(circle at top left, rgba(94,234,212,.15), transparent 60%),
    rgba(15,23,42,.96);
  padding:18px;
  box-shadow:0 12px 30px rgba(5,10,20,.7);
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:center;
}

.feesv-card-title{
  margin:0;
  font-size:1.2rem;
  font-weight:700;
  color:#e2e8f0;
}

.feesv-card-desc{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}

.feesv-price{
  margin:4px 0;
  font-size:1.8rem;
  font-weight:800;
}

.feesv-price .currency{
  font-size:1rem;
  opacity:.7;
}

.feesv-price .unit{
  font-size:.85rem;
  color:rgba(200,210,225,.85);
  margin-left:4px;
}

.feesv-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:.88rem;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.feesv-cta{
  margin-top:auto;
  justify-content:center;
  margin-top:14px;
}

/* Notas adicionales */

.feesv-notes{
  margin-top:30px;
  display:grid;
  gap:12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .feesv-notes{
    grid-template-columns:1fr;
  }
}

.feesv-note-card{
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.96);
  padding:14px;
  box-shadow:0 10px 26px rgba(15,23,42,.75);
}

.feesv-note-card h4{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:600;
}

.feesv-note-card p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}
/* ===========================
   TALLER "CERRAR CON CALMA"
   =========================== */

.closing-body{
  background:#0b0f14;
  color:#e2e8f0;
}

.closing{
  padding: clamp(60px, 8vw, 90px) 0;
  max-width: 960px;
}

/* HERO */

.closing-hero{
  text-align:center;
  max-width:780px;
  margin:0 auto 28px;
}

.closing-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.25rem .8rem;
  border-radius:999px;
  background:rgba(22,163,74,.12);
  border:1px solid rgba(74,222,128,.5);
  color:#bbf7d0;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.closing-title{
  margin:10px 0 8px;
  font-size:clamp(26px, 3.3vw, 38px);
  font-weight:800;
  line-height:1.2;
}

.closing-title span{
  display:block;
  font-size:clamp(18px, 2vw, 22px);
  font-weight:500;
  color:var(--muted);
}

.closing-lead{
  margin:6px 0;
  font-size:.98rem;
  color:var(--muted);
}

.closing-cta-group{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.closing-cta,
.closing-cta-secondary{
  font-size:.9rem;
}

/* Layout principal */

.closing-content{
  display:grid;
  gap:22px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  align-items:flex-start;
}

@media (max-width: 900px){
  .closing-content{
    grid-template-columns:1fr;
  }
}

.closing-main h2{
  margin:0 0 6px;
  font-size:1.3rem;
  font-weight:700;
}

.closing-main p{
  font-size:.95rem;
  color:var(--muted);
}

/* Lista principal */

.closing-list{
  margin:10px 0 14px;
  padding-left:1.2rem;
  font-size:.95rem;
  color:var(--muted);
}

.closing-list li{
  margin-bottom:4px;
}

/* Bloques */

.closing-block{
  margin-top:12px;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.4);
  background:rgba(15,23,42,.96);
  box-shadow:0 10px 26px rgba(15,23,42,.75);
  font-size:.9rem;
  color:var(--muted);
}

.closing-block h3{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:600;
  color:#e2e8f0;
}

.closing-bonus{
  background: radial-gradient(circle at top left, rgba(74,222,128,.18), transparent 60%),
              rgba(15,23,42,.96);
  border-color:rgba(74,222,128,.6);
}

.closing-bonus-title{
  font-weight:600;
  color:#bbf7d0;
}

/* Sidebar */

.closing-sidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.closing-card{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.5);
  background: radial-gradient(circle at top right, rgba(56,189,248,.15), transparent 60%),
              rgba(15,23,42,.97);
  padding:16px 16px 18px;
  box-shadow:0 12px 30px rgba(15,23,42,.8);
}

.closing-card h3{
  margin:0 0 8px;
  font-size:1.1rem;
  font-weight:600;
}

/* Detalles */

.closing-details{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.closing-details .label{
  display:block;
  font-weight:600;
  color:#e2e8f0;
}

.closing-details .value{
  display:block;
}

/* Precio */

.closing-price-box{
  margin:10px 0 8px;
  text-align:center;
}

.closing-price-label{
  margin:0;
  font-size:.9rem;
  color:rgba(226,232,240,.9);
}

.closing-price{
  margin:0;
  font-size:1.8rem;
  font-weight:800;
}

.closing-price .currency{
  font-size:1rem;
  opacity:.75;
}

.closing-price .unit{
  font-size:.96rem;
  margin-left:4px;
}

.closing-price-alt{
  margin:2px 0 0;
  font-size:.9rem;
  color:rgba(148,163,184,.95);
}

/* Pagos */

.closing-payments{
  margin:8px 0;
  font-size:.9rem;
}

.closing-payments-label{
  margin:0 0 2px;
  color:#e2e8f0;
}

.closing-payments-list{
  margin:0;
  color:var(--muted);
}

/* CTA sidebar */

.closing-note{
  margin:8px 0 10px;
  font-size:.9rem;
  color:rgba(226,232,240,.96);
}

.closing-cta-full{
  width:100%;
  justify-content:center;
  margin-bottom:6px;
}

.closing-cta-full.secondary{
  font-size:.86rem;
}

/* Footer texto */

.closing-footer-text{
  margin:0;
  font-size:.9rem;
  color:rgba(148,163,184,.9);
  margin-left:4px;
}
/* ===========================
   HERO CON IMAGEN - CERRAR CON CALMA
   =========================== */

.closing-image-hero{
  position:relative;
  width:100%;
  height: clamp(290px, 55vw, 420px);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:35px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}

.closing-image-hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.78);
}

.closing-image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(0,0,0,.35),
    rgba(0,0,0,.55)
  );
  z-index:1;
}

.closing-image-hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20px;
  text-align:center;
  color:#e2e8f0;
}

.closing-image-pill{
  display:inline-block;
  padding:.3rem .9rem;
  background:rgba(74,222,128,.2);
  border:1px solid rgba(74,222,128,.4);
  color:#bbf7d0;
  border-radius:999px;
  font-size:.82rem;
  margin-bottom:8px;
  backdrop-filter:blur(6px);
}

.closing-image-title{
  margin:0 0 10px;
  font-size:clamp(28px, 4vw, 42px);
  font-weight:800;
  line-height:1.2;
  text-shadow:0 4px 10px rgba(0,0,0,.4);
}

.closing-image-title span{
  display:block;
  font-size:clamp(14px, 1.6vw, 18px);
  font-weight:500;
  margin-top:6px;
  color:#d9e3eb;
}

.closing-image-btn{
  margin-top:14px;
  font-size:.9rem;
  backdrop-filter:blur(4px);
}
/* ===========================
   TALLER "NAVIDAD ENTRE DOS TIERRAS"
   =========================== */

.migration-body{
  background:#0b0f14;
  color:#e2e8f0;
}

.migration{
  padding: clamp(60px, 8vw, 90px) 0;
  max-width: 980px;
}

/* HERO */

.migration-hero{
  text-align:center;
  max-width:780px;
  margin:0 auto 26px;
}

.migration-pill{
  display:inline-block;
  padding:.3rem .9rem;
  border-radius:999px;
  background:rgba(248,153,91,.15);
  border:1px solid rgba(248,153,91,.5);
  color:#fed7aa;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.migration-title{
  margin:10px 0 8px;
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:800;
  line-height:1.2;
}

.migration-title span{
  display:block;
  font-size:clamp(17px, 2vw, 21px);
  font-weight:500;
  color:var(--muted);
}

.migration-lead{
  margin:6px 0;
  font-size:.96rem;
  color:var(--muted);
}

.migration-cta-group{
  margin-top:14px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.migration-cta,
.migration-cta-secondary{
  font-size:.9rem;
}

/* Layout principal */

.migration-content{
  display:grid;
  gap:22px;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1.1fr);
  align-items:flex-start;
}

@media (max-width: 900px){
  .migration-content{
    grid-template-columns:1fr;
  }
}

.migration-main{
  font-size:.95rem;
}

.migration-section-title{
  margin:0 0 6px;
  font-size:1.25rem;
  font-weight:700;
}

.migration-text{
  margin:4px 0;
  color:var(--muted);
}

.migration-text-final{
  margin-top:12px;
  font-size:.96rem;
  color:rgba(248,250,252,.9);
}

/* Bloques, listas, temario */

.migration-block{
  margin-top:14px;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.4);
  background:rgba(15,23,42,.96);
  box-shadow:0 10px 24px rgba(15,23,42,.8);
}

.migration-block h3{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:600;
}

.migration-list{
  margin:4px 0 6px;
  padding-left:1.1rem;
  color:var(--muted);
  font-size:.93rem;
}

.migration-list li{
  margin-bottom:3px;
}

.migration-outline{
  margin:6px 0 0;
  padding-left:1.3rem;
  font-size:.93rem;
  color:var(--muted);
}

.migration-outline li{
  margin-bottom:6px;
}

/* Sidebar */

.migration-sidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.migration-card{
  border-radius:18px;
  border:1px solid rgba(248,153,91,.6);
  background: radial-gradient(circle at top right, rgba(248,153,91,.18), transparent 60%),
              rgba(15,23,42,.98);
  padding:16px 16px 18px;
  box-shadow:0 12px 30px rgba(15,23,42,.9);
}

.migration-card h3{
  margin:0 0 8px;
  font-size:1.08rem;
  font-weight:600;
}

.migration-details{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.migration-details .label{
  display:block;
  font-weight:600;
  color:#e2e8f0;
}

.migration-details .value{
  display:block;
}

/* Precio */

.migration-price-box{
  margin:10px 0 6px;
  text-align:center;
}

.migration-price-label{
  margin:0;
  font-size:.9rem;
  color:rgba(248,250,252,.9);
}

.migration-price{
  margin:0;
  font-size:1.7rem;
  font-weight:800;
}

.migration-price .currency{
  font-size:1rem;
  opacity:.7;
}

.migration-price .unit{
  font-size:.95rem;
  margin-left:4px;
}

/* Incluye */

.migration-includes{
  margin:8px 0 10px;
}

.migration-includes-title{
  margin:0 0 4px;
  font-size:.9rem;
  font-weight:600;
  color:#e2e8f0;
}

/* CTAs */

.migration-cta-full{
  width:100%;
  justify-content:center;
  margin-bottom:6px;
}

.migration-cta-full.secondary{
  font-size:.86rem;
}
/* ===========================
   CARRUSEL DE TALLERES
   =========================== */

.workshops{
  padding: clamp(48px, 6.5vw, 80px) 0;
}

.workshops-header{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}

.workshops-title{
  margin:8px 0 8px;
  font-size:clamp(24px, 3vw, 32px);
  font-weight:800;
}

.workshops-intro{
  margin:0;
  font-size:.95rem;
  color:var(--muted);
}

/* Carrusel */

.workshops-carousel{
  margin-top:clamp(20px, 3vw, 28px);
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
}

.workshops-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:4px 2px 4px;
}

.workshops-track::-webkit-scrollbar{
  height:6px;
}

.workshops-track::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.7);
  border-radius:999px;
}

.workshop-card{
  scroll-snap-align:start;
  min-width: min(320px, 80vw);
  max-width:360px;
  flex:0 0 auto;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.5);
  background: radial-gradient(circle at top left, rgba(94,234,212,.15), transparent 60%),
              rgba(15,23,42,.97);
  padding:14px 14px 16px;
  box-shadow:0 10px 26px rgba(15,23,42,.8);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.workshop-tag{
  align-self:flex-start;
  padding:.18rem .6rem;
  border-radius:999px;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:rgba(56,189,248,.2);
  border:1px solid rgba(56,189,248,.7);
  color:#bae6fd;
}

.workshop-tag-warm{
  background:rgba(248,153,91,.2);
  border-color:rgba(248,153,91,.7);
  color:#fed7aa;
}

.workshop-title{
  margin:4px 0 0;
  font-size:1.08rem;
  font-weight:600;
}

.workshop-subtitle{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}

.workshop-meta{
  margin:4px 0 0;
  font-size:.86rem;
  color:rgba(191,219,254,.95);
}

.workshop-price{
  margin:4px 0;
  font-size:1.2rem;
  font-weight:700;
}

.workshop-price .currency{
  font-size:.9rem;
  opacity:.8;
}

.workshop-price .unit{
  font-size:.82rem;
  color:rgba(148,163,184,.95);
  margin-left:3px;
}

.workshop-desc{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}

.workshop-cta{
  margin-top:10px;
  justify-content:center;
}

/* Botones prev/next */

.workshops-nav{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.98);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.3rem;
  color:#e5e7eb;
  box-shadow:0 8px 20px rgba(15,23,42,.8);
}

.workshops-nav:hover{
  border-color:var(--primary);
}

@media (max-width: 720px){
  .workshops-carousel{
    grid-template-columns:minmax(0, 1fr);
  }

  .workshops-nav{
    display:none;
  }
}
