/* Dra. Julia Hartmann — Medsy. Mobile first; desktop desde 960px. */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/montserrat-latin-800-normal.woff2) format('woff2'); }
:root {
  --morado: #352682;
  --morado-osc: #241a5e;
  --lavanda: #9384DD;
  --menta: #B8DEC9;
  --menta-claro: #EEF7F2;
  --durazno: #EEB9AB;
  --tinta: #2E2858;
  --tinta-suave: #4A4472;
  --gris-legal: #5A5480;
  --lila-texto: #D6D1F3;
  --linea: #E4E0F5;
  --verde-osc: #1F3D2D;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--tinta); font-family: Montserrat, system-ui, sans-serif; font-size: 18px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: var(--morado); }
a:hover { color: var(--morado-osc); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* Pétalo: la forma del logo */
.petalo { border-radius: 50% 6% 50% 6% / 50% 6% 50% 6%; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 19px; text-decoration: none; line-height: 1.2; text-align: center; }
.btn svg { flex: none; }
.btn--primario { background: var(--morado); color: #fff; }
.btn--primario:hover { background: var(--morado-osc); color: #fff; }
.btn--borde { border: 2px solid var(--morado); color: var(--morado); background: #fff; }
.btn--borde:hover { background: #F4F2FC; }
.btn--durazno { background: var(--durazno); color: var(--morado); }
.btn--durazno:hover { background: #F3C9BE; color: var(--morado); }
.btn--bloque { width: 100%; }

/* 1. HERO */
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.top__logo { height: 44px; width: auto; }
.top__wa { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--morado); text-decoration: none; }
.top__wa-texto { display: none; }

.hero { padding-bottom: 28px; }
.hero__grid { display: flex; flex-direction: column; gap: 22px; }
.hero__foto { position: relative; width: 270px; height: 286px; margin: 6px auto 0; }
.hero__foto::before { content: ""; position: absolute; inset: 0; transform: translate(18px, 10px); background: var(--menta); border-radius: 135px 16px 135px 16px; }
.hero__foto img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: 135px 16px 135px 16px; }
.hero__adorno { display: none; }
.hero h1 { font-size: 32px; line-height: 1.12; font-weight: 700; color: var(--morado); letter-spacing: -0.3px; }
.hero__sub { font-size: 18px; line-height: 1.5; margin-top: 14px; }
.hero__modalidad { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--morado); margin-top: 10px; }
.hero__ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.hero__cred { display: flex; align-items: center; gap: 12px; margin-top: 35px; font-size: 15px; line-height: 1.45; color: var(--tinta-suave); }
.hero__cred img { width: 30px; height: 30px; flex: none; }
.legal-mini { font-size: 13px; color: var(--gris-legal); margin-top: 12px; }

/* 2. SERVICIOS */
.servicios { padding: 32px 12px; }
.servicios__caja { background: var(--morado); color: #fff; border-radius: 40px 10px 40px 10px; padding: 40px 18px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 1344px; margin: 0 auto; }
.etiqueta { font-size: 16px; font-weight: 700; color: var(--menta); }
.servicios h2 { font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.3px; }
.servicios__sub { font-size: 17px; color: var(--lila-texto); }
.servicios__foto { width: 100%; height: 240px; margin: 6px 0; object-fit: cover; object-position: center 16%; border-radius: 95px 8px 95px 8px; }
.servicios__lista { display: grid; gap: 14px; }
.servicio { background: rgba(255,255,255,0.08); border-radius: 28px 6px 28px 6px; padding: 22px 20px; display: flex; gap: 16px; align-items: flex-start; }
.servicio svg { flex: none; width: 34px; height: 34px; }
.servicio h3 { font-size: 20px; line-height: 1.25; font-weight: 600; }
.servicio p { font-size: 16px; line-height: 1.5; color: var(--lila-texto); margin-top: 6px; }
.servicios .btn { margin-top: 10px; }

/* 3. CUÁNDO ACUDIR */
.acudir { background: var(--menta-claro); padding-block: 64px; }
.acudir__grid { display: flex; flex-direction: column; gap: 18px; }
.acudir h2 { font-size: 32px; line-height: 1.15; font-weight: 700; color: var(--morado); }
.acudir__lista { font-size: 19px; line-height: 1.4; font-weight: 500; }
.acudir__lista li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #CFE7DA; }
.acudir__lista li::before { content: ""; flex: none; width: 13px; height: 13px; margin-top: 6px; border-radius: 9px 2px 9px 2px; background: var(--lavanda); }
.acudir__cierre { font-size: 18px; font-weight: 600; color: var(--morado); margin-top: 6px; }
.acudir__cta-desk { display: none; }

/* 4. SOBRE MÍ */
.sobre { padding-block: 64px; }
.sobre__grid { display: flex; flex-direction: column; gap: 24px; }
.sobre__fotos { position: relative; height: 440px; }
.sobre__fotos::before { content: ""; position: absolute; left: 14px; top: 14px; width: 270px; height: 340px; border-radius: 135px 14px 135px 14px; background: var(--durazno); }
.sobre__principal { position: absolute; left: 0; top: 0; width: 270px; height: 340px; object-fit: cover; object-position: center 18%; border-radius: 135px 14px 135px 14px; }
.sobre__diploma { position: absolute; right: 0; top: 0; width: 120px; height: 158px; object-fit: cover; object-position: center 30%; border-radius: 60px 8px 60px 8px; border: 6px solid #fff; }
.sobre__cita { position: absolute; left: 24px; right: 0; bottom: 0; padding: 22px 20px; background: var(--morado); color: #fff; border-radius: 28px 6px 28px 6px; }
.sobre__cita blockquote { font-size: 19px; line-height: 1.4; font-weight: 500; }
.sobre h2 { font-size: 32px; line-height: 1.15; font-weight: 700; color: var(--morado); }
.sobre__texto { display: flex; flex-direction: column; gap: 18px; }
.sobre__texto p { font-size: 18px; line-height: 1.65; }
.creds { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 16px; line-height: 1.5; }
.creds li { display: flex; gap: 14px; align-items: flex-start; }
.creds img { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.creds strong { color: var(--morado); }
.creds span { color: var(--tinta-suave); }

/* 5. BENEFICIOS */
.beneficios { background: var(--durazno); color: var(--morado); padding-block: 64px; }
.beneficios h2 { font-size: 32px; line-height: 1.15; font-weight: 700; margin-bottom: 28px; }
.beneficios ul { display: flex; flex-direction: column; gap: 22px; }
.beneficios li { display: flex; gap: 16px; align-items: flex-start; font-size: 19px; line-height: 1.4; font-weight: 600; }
.beneficios li::before { content: ""; flex: none; width: 32px; height: 32px; border-radius: 16px 3px 16px 3px; background: var(--menta); }
.beneficios li:nth-child(even)::before { border-radius: 3px 16px 3px 16px; background: var(--lavanda); }
.beneficios li:last-child::before { background: #fff; }

/* 6. TESTIMONIOS */
.testimonios { padding-block: 64px; }
.testimonios__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.testimonios h2 { font-size: 32px; line-height: 1.12; font-weight: 700; color: var(--morado); }
.testimonios__foto { width: 100%; height: 200px; object-fit: cover; object-position: 60% 35%; border-radius: 100px 10px 100px 10px; }
.testimonios__cta-desk { display: none; }
.testimonios__lista { display: grid; gap: 18px; }
.testimonio { border-radius: 32px 6px 32px 6px; padding: 26px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.testimonio--menta { background: var(--menta); color: var(--verde-osc); }
.testimonio--durazno { background: var(--durazno); color: #3A1E17; }
.testimonio--lavanda { background: var(--lavanda); color: #1E1650; }
.testimonio blockquote { font-size: 18px; line-height: 1.6; font-weight: 500; margin-top: 16px; }
.testimonio figcaption { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.12); }
.testimonio strong { font-size: 17px; }
.verificada { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 14px 7px 12px; border-radius: 18px 4px 18px 4px; background: var(--morado); color: #fff; font-size: 15px; font-weight: 700; }
.verificada--clara { background: #fff; color: var(--morado); }
.testimonios__cta-mob { margin-top: 32px; }

/* 7. AGENDAR */
.agendar { background: var(--menta); padding-block: 56px; }
.agendar__top { display: flex; flex-direction: column; gap: 16px; }
.agendar h2 { font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--morado); }
.agendar__sub { font-size: 18px; color: var(--verde-osc); margin-top: 12px; }
.agendar .btn--primario { font-weight: 700; min-height: 62px; }
.ubicacion { margin-top: 32px; background: #fff; border-radius: 32px 6px 32px 6px; padding: 18px; display: grid; gap: 16px; }
.ubicacion__datos { display: flex; gap: 14px; align-items: center; }
.ubicacion__foto { width: 96px; height: 110px; flex: none; object-fit: cover; object-position: center 35%; border-radius: 48px 6px 48px 6px; }
.ubicacion strong { display: block; font-size: 18px; line-height: 1.25; color: var(--morado); }
.ubicacion address { font-style: normal; font-size: 15px; line-height: 1.55; margin-top: 6px; }
.ubicacion__mapa { width: 100%; height: 220px; border: 0; border-radius: 22px 5px 22px 5px; background: #E9EEF1; }
.ubicacion .btn--borde { min-height: 54px; font-size: 17px; }
.ubicacion__llegar-desk { display: none; }

/* 8. PIE */
.pie__inner { display: flex; flex-direction: column; }
.pie__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.pie { background: var(--morado); color: #fff; overflow: hidden; padding-block: 48px 28px; }
.pie a { color: #fff; }
.pie__firma { order: -1; display: grid; grid-template-columns: auto auto; grid-template-areas: "l1 foto" "l2 l2"; justify-content: start; column-gap: 16px; align-items: end; }
.pie__nombre { display: contents; font-weight: 800; letter-spacing: -0.04em; line-height: 0.86; white-space: nowrap; font-size: clamp(54px, 15vw, 196px); }
.pie__l1 { grid-area: l1; display: block; }
.pie__l2 { grid-area: l2; display: block; }
.pie__foto { grid-area: foto; width: 130px; height: 150px; object-fit: cover; object-position: center 20%; border-radius: 65px 8px 65px 8px; margin-bottom: 4px; }
.pie__barra { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; align-items: center; }
.pie__lema { display: none; }
.pie__wa { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: #fff; color: var(--morado) !important; font-size: 16px; font-weight: 700; text-decoration: none; }
.pie__red { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 48px; min-height: 48px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.5); text-decoration: none; font-size: 17px; font-weight: 600; }
.pie__red-texto, .pie__wa-num { display: none; }
.pie__red:hover, .pie__wa:hover { opacity: 0.9; }
.pie__dir { display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; font-size: 16px; line-height: 1.55; font-weight: 500; text-decoration: none; }
.pie__dir svg { flex: none; margin-top: 3px; }
.pie__iso { display: none; }
.pie__legal { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 13px; line-height: 1.6; color: var(--lila-texto); }
.pie__legal a { color: var(--lila-texto); }

/* ============ DESKTOP ============ */
@media (min-width: 960px) {
  :root { --gutter: 80px; }
  body { font-size: 20px; }

  .top { padding-block: 28px; }
  .top__logo { height: 58px; }
  .top__wa { width: auto; height: auto; border: 0; gap: 10px; font-size: 20px; font-weight: 600; text-decoration: none; }
  .top__wa-texto { display: inline; }

  .hero { padding-bottom: 20px; }
  .hero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; min-height: 640px; }
  .hero__texto { max-width: 600px; }
  .hero__foto { order: 2; width: 470px; height: 600px; margin: 0 auto; }
  .hero__foto::before { transform: translate(36px, 24px); border-radius: 235px 24px 235px 24px; }
  .hero__foto img { border-radius: 235px 24px 235px 24px; object-position: center 20%; }
  .hero__adorno { display: block; position: absolute; width: 120px; height: 120px; left: -60px; bottom: 30px; border-radius: 60px 8px 60px 8px; background: var(--durazno); }
  .hero h1 { font-size: 60px; line-height: 1.08; letter-spacing: -0.5px; }
  .hero__sub { font-size: 22px; margin-top: 28px; }
  .hero__modalidad { font-size: 22px; margin-top: 12px; }
  .hero__ctas { flex-direction: row; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
  .hero__ctas .btn { min-height: 64px; padding: 0 32px; font-size: 20px; }
  .hero__cred { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 17px; }
  .hero__cred img { width: 36px; height: 36px; }
  .legal-mini { font-size: 14px; margin-top: 8px; }

  .servicios { padding: 64px 48px; }
  .servicios__caja { border-radius: 64px 14px 64px 14px; padding: 72px 64px; gap: 40px; }
  .servicios__head { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: end; }
  .servicios__head > div { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
  .etiqueta { font-size: 18px; }
  .servicios h2 { font-size: 50px; line-height: 1.12; letter-spacing: -0.5px; }
  .servicios__sub { font-size: 20px; }
  .servicios__foto { width: 220px; height: 264px; margin: 0; object-position: center 18%; border-radius: 110px 10px 110px 10px; }
  .servicios__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .servicio { flex-direction: column; gap: 12px; padding: 32px 28px; border-radius: 36px 8px 36px 8px; }
  .servicio svg { width: 40px; height: 40px; }
  .servicio h3 { font-size: 22px; margin-top: 10px; }
  .servicio p { font-size: 17px; }
  .servicios .btn { align-self: flex-start; margin-top: 0; min-height: 60px; padding: 0 30px; }

  .acudir { padding-block: 112px; }
  .acudir__grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 80px; align-items: start; }
  .acudir__intro { display: flex; flex-direction: column; gap: 20px; }
  .acudir h2 { font-size: 46px; line-height: 1.12; }
  .acudir__intro p { font-size: 21px; line-height: 1.6; }
  .acudir__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 20px; font-size: 21px; line-height: 1.45; }
  .acudir__lista li { gap: 14px; padding: 0 0 20px; }
  .acudir__lista li::before { width: 14px; height: 14px; margin-top: 8px; border-radius: 10px 2px 10px 2px; }
  .acudir__cierre { font-size: 21px; margin-top: 28px; }
  .acudir__cta-desk { display: inline-flex; align-self: flex-start; margin-top: 8px; min-height: 60px; padding: 0 30px; }
  .acudir__cta-mob { display: none; }

  .sobre { padding-block: 112px; }
  .sobre__grid { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 96px; align-items: center; }
  .sobre__fotos { height: 610px; }
  .sobre__fotos::before { left: -24px; top: 24px; width: 400px; height: 520px; border-radius: 200px 20px 200px 20px; }
  .sobre__principal { width: 400px; height: 520px; border-radius: 200px 20px 200px 20px; }
  .sobre__diploma { width: 190px; height: 250px; border-radius: 95px 12px 95px 12px; border-width: 8px; }
  .sobre__cita { left: 60px; padding: 32px 34px; border-radius: 40px 8px 40px 8px; }
  .sobre__cita blockquote { font-size: 24px; }
  .sobre__texto { display: flex; flex-direction: column; gap: 24px; max-width: 680px; }
  .sobre h2 { font-size: 46px; line-height: 1.12; }
  .sobre__texto p { font-size: 20px; }
  .creds { gap: 16px; margin-top: 8px; padding-top: 28px; font-size: 18px; }
  .creds img { width: 28px; height: 28px; }

  .beneficios { padding-block: 104px; }
  .beneficios h2 { font-size: 46px; line-height: 1.12; margin-bottom: 56px; max-width: 760px; }
  .beneficios ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
  .beneficios li { flex-direction: column; gap: 20px; padding-top: 28px; border-top: 2px solid rgba(53,38,130,0.25); font-size: 22px; }
  .beneficios li::before { width: 40px; height: 40px; border-radius: 20px 4px 20px 4px; }
  .beneficios li:nth-child(even)::before { border-radius: 4px 20px 4px 20px; }

  .testimonios { padding-block: 112px; }
  .testimonios__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
  .testimonios__head > div { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
  .testimonios h2 { font-size: 46px; }
  .testimonios__foto { width: 300px; height: 210px; border-radius: 105px 10px 105px 10px; }
  .testimonios__cta-desk { display: inline-flex; align-self: flex-start; min-height: 60px; padding: 0 30px; }
  .testimonios__cta-mob { display: none; }
  .testimonios__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .testimonio { padding: 40px; border-radius: 40px 8px 40px 8px; }
  .testimonio blockquote { font-size: 20px; }
  .testimonio strong { font-size: 18px; }

  .agendar { padding-block: 104px; }
  .agendar__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: center; }
  .agendar__top > div { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
  .agendar h2 { font-size: 50px; }
  .agendar__sub { font-size: 22px; margin-top: 0; }
  .agendar .btn--primario { min-height: 76px; padding: 0 40px; font-size: 22px; white-space: nowrap; }
  .ubicacion { margin-top: 56px; grid-template-columns: 220px minmax(0, 1fr) 560px; gap: 36px; align-items: center; padding: 28px; border-radius: 48px 10px 48px 10px; }
  .ubicacion__datos { display: contents; }
  .ubicacion__foto { width: 220px; height: 240px; border-radius: 110px 10px 110px 10px; }
  .ubicacion__info { display: flex; flex-direction: column; gap: 22px; }
  .ubicacion strong { font-size: 21px; }
  .ubicacion address { font-size: 18px; }
  .ubicacion__mapa { grid-column: 3; grid-row: 1; height: 300px; border-radius: 36px 8px 36px 8px; }
  .ubicacion__llegar-desk { display: inline-flex; align-self: flex-start; min-height: 56px; font-size: 18px; }
  .ubicacion__llegar-mob { display: none; }

  .pie { padding-block: 80px 40px; }
  .pie__barra { order: -1; justify-content: space-between; margin: 0 0 48px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.2); gap: 24px; }
  .pie__lema { display: block; font-size: 20px; font-weight: 600; }
  .pie__botones { display: flex; gap: 12px; }
  .pie__wa { min-height: 52px; padding: 0 22px; font-size: 17px; }
  .pie__red { min-height: 52px; padding: 0 20px; }
  .pie__red-texto, .pie__wa-num { display: inline; }
  .pie__abajo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 48px; }
  .pie__dir { margin-top: 0; font-size: 18px; }
  .pie__iso { display: block; width: 56px; height: 56px; }
  .pie__legal { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; font-size: 15px; }
  .pie__firma { order: 0; grid-template-areas: "l1 foto" "l2 foto"; column-gap: 40px; }
  .pie__nombre { font-size: clamp(100px, 11vw, 160px); }
  .pie__br { display: none; }
  .pie__foto { width: 240px; height: 290px; border-radius: 120px 12px 120px 12px; margin-bottom: 0.06em; }
}

/* 9. PÁGINAS LEGALES */
.legal { max-width: 760px; padding-block: 48px 72px; }
.legal h1 { font-size: 36px; line-height: 1.15; color: #352682; }
.legal__fecha { margin-top: 8px; font-size: 14px; color: var(--gris-legal); }
.legal h2 { margin-top: 36px; font-size: 20px; line-height: 1.3; color: #352682; }
.legal p, .legal li { margin-top: 12px; line-height: 1.65; }
.legal ul { padding-left: 22px; list-style: disc; }
.legal li { margin-top: 6px; }
.legal a { color: #352682; }
.legal__volver { margin-top: 40px; }
.legal__pie { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-block: 24px 40px; border-top: 1px solid #E6E2F5; font-size: 13px; color: var(--gris-legal); }
.legal__pie a { color: var(--gris-legal); }