:root {
  --navy: #07165e;
  --navy-dark: #051044;
  --navy-medium: #0c2876;
  --blue: #0759ae;
  --blue-light: #dfedfa;
  --text: #1e2d49;
  --muted: #66768c;
  --bg: #f6f8fb;
  --white: #ffffff;
  --line: rgba(22, 57, 112, .14);
  --shadow: 0 20px 60px rgba(8, 27, 80, .12);
  --serif: Georgia, 'Times New Roman', serif;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:92px}
body {margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.65;overflow-x:hidden}
a {color:inherit;text-decoration:none}
img {display:block;max-width:100%}
button {font:inherit}
.container {width:min(1180px,calc(100% - 44px));margin-inline:auto}
.section-spacing {padding:clamp(70px,8vw,116px) 0}
section[id] {scroll-margin-top:88px}
.skip-link {position:absolute;top:-55px;left:16px;z-index:999;background:var(--navy);color:var(--white);padding:10px 18px;border-radius:12px}
.skip-link:focus {top:12px}
a:focus-visible,button:focus-visible {outline:3px solid #5eaceb;outline-offset:4px}

.site-header {position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(7,22,94,.08);box-shadow:0 5px 26px rgba(8,22,70,.035);backdrop-filter:blur(14px)}
.nav {min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand {display:flex;align-items:center;gap:13px;min-width:0}
.brand-icon {display:grid;place-items:center;flex:0 0 57px;width:57px;height:57px;border:1px solid rgba(7,22,94,.13);border-radius:18px;background:linear-gradient(135deg,#f1f6fd,#d8e8f8);color:var(--navy);font-family:var(--serif);font-size:35px;line-height:1;box-shadow:0 6px 18px rgba(7,22,94,.08)}
.brand-names {display:block}
.brand-names strong {display:block;font-family:var(--serif);font-size:1.17rem;line-height:1.03;letter-spacing:-.035em;color:var(--navy)}
.brand-names small {display:block;margin-top:6px;color:var(--blue);text-transform:uppercase;letter-spacing:.075em;font-size:.64rem;font-weight:700}
.menu {display:flex;align-items:center;gap:5px}
.menu a {font-weight:700;color:var(--navy-medium);padding:10px 14px;border-radius:12px;transition:background .2s ease,color .2s ease}
.menu a:hover {background:#eaf2fc;color:var(--blue)}
.menu-button {display:none;border:0;background:var(--navy);color:var(--white);border-radius:13px;width:46px;height:44px;cursor:pointer;padding:10px 12px;flex:0 0 46px}
.menu-button span {display:block;height:2px;width:100%;margin:5px 0;border-radius:2px;background:#fff}

.eyebrow {display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-size:.79rem;letter-spacing:.2em;font-weight:800;text-transform:uppercase}
.eyebrow-line {display:inline-block;width:28px;height:2px;border-radius:5px;background:currentColor}
.eyebrow-white {color:#cedeff}
h1,h2,h3,p,figure {margin-top:0}
h2 {font-family:var(--serif);color:var(--navy);font-size:clamp(2rem,4.25vw,3.8rem);letter-spacing:-.045em;line-height:1.12;font-weight:700;margin:14px 0 18px}

.hero {background:linear-gradient(104deg,#f6f7fa 0%,#e5edf7 56%,#d0e2f5 100%);position:relative;isolation:isolate;overflow:hidden}
.hero::before {content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 83% 12%,rgba(4,64,147,.16),transparent 28%),radial-gradient(circle at 10% 90%,rgba(7,89,174,.08),transparent 30%)}
.hero-grid {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(22px,5vw,80px);align-items:center;min-height:660px;padding-top:58px;padding-bottom:64px}
.hero-content {position:relative;z-index:2}
.eyebrow-bright {font-size:.92rem}
.hero h1 {font-family:var(--serif);font-weight:700;color:var(--navy);font-size:clamp(3.4rem,5.8vw,6.2rem);line-height:1.035;letter-spacing:-.066em;margin:20px 0 12px}
.hero h1 span {color:var(--blue)}
.hero-subtitle {font-weight:800;color:var(--navy-medium);text-transform:uppercase;letter-spacing:.09em;font-size:clamp(.9rem,1.4vw,1.2rem);margin-bottom:26px}
.experience-banner {padding:18px 26px;margin:0 0 30px;max-width:384px;border-radius:16px 42px 42px 16px;background:var(--navy);color:#fff;box-shadow:0 18px 38px rgba(7,22,94,.21);display:flex;flex-direction:column;line-height:1.21}
.experience-banner strong {font-family:var(--serif);font-size:clamp(1.45rem,2.7vw,2.2rem)}
.experience-banner span {font-size:1.12rem;letter-spacing:.025em}
.hero-actions,.contact-buttons {display:flex;flex-wrap:wrap;gap:12px}
.button {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:11px 24px;border-radius:12px;font-weight:800;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.button:hover {transform:translateY(-2px)}
.button-blue {background:var(--blue);color:#fff;box-shadow:0 12px 28px rgba(7,89,174,.22)}
.button-blue:hover {background:#094b92;box-shadow:0 16px 32px rgba(7,89,174,.3)}
.button-outline {color:var(--navy);border:1px solid rgba(7,22,94,.25);background:#fff}
.button-outline:hover {background:#e8f0fb}
.hero-showcase {position:relative;max-width:480px;width:100%;justify-self:center;padding:20px 12px 22px}
.hero-orbit {position:absolute;border-radius:50%;pointer-events:none}
.orbit-a {width:350px;height:350px;right:-50px;top:-28px;background:rgba(7,89,174,.12)}
.orbit-b {width:170px;height:170px;left:-62px;bottom:15px;border:26px solid rgba(7,22,94,.065)}
.hero-portrait {position:relative;max-width:355px;margin:auto;padding:9px;background:#e9f1fa;border-radius:26px;box-shadow:0 26px 58px rgba(7,22,94,.20)}
.hero-portrait img {width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:18px}
.hero-appointment {position:relative;margin:-23px auto 0;width:min(100%,390px);display:flex;flex-wrap:wrap;gap:3px 12px;align-items:center;justify-content:center;padding:15px 20px;border-radius:18px;background:var(--navy);color:white;box-shadow:0 16px 34px rgba(6,20,76,.22);border:1px solid rgba(255,255,255,.2);text-align:center}
.calendar-symbol {font-size:1.4rem;line-height:1}
.hero-appointment span:nth-child(2) {font-weight:700}
.hero-appointment a {font-weight:900;font-size:1.15rem;white-space:nowrap}

/* Los bordes difuminados se realizan solo con CSS; los archivos JPEG originales no se editan ni recortan. */
.photo-frame {position:relative;isolation:isolate;margin:0;padding:8px;overflow:hidden;border-radius:24px;border:1px solid rgba(7,49,118,.3);background:#fff;box-shadow:0 20px 48px rgba(5,32,99,.12),0 0 24px rgba(50,105,175,.09)}
.photo-frame::after {content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 25px 8px rgba(246,250,255,.21)}
.photo-frame img {position:relative;z-index:0;display:block;width:100%;height:auto;object-fit:contain;border-radius:16px}

.intro {background:#fff}
.intro-grid {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:22px;align-items:stretch}
.intro-main {padding:clamp(27px,4vw,54px);border:1px solid var(--line);border-radius:26px;background:linear-gradient(125deg,#fff,#f2f7fd);box-shadow:var(--shadow)}
.intro-main h2 {margin-bottom:12px}
.intro-main p {font-size:1.18rem;color:var(--muted);margin-bottom:0}
.intro-highlight {display:flex;flex-direction:column;justify-content:center;gap:8px;border-radius:26px;padding:30px;background:var(--navy);color:#fff;box-shadow:0 17px 35px rgba(7,22,94,.18)}
.intro-highlight span {font-size:.95rem;opacity:.75}
.intro-highlight a {font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,2.15rem);line-height:1.2;font-weight:700}

.formation {background:#f5f7fc}
.formation-heading {display:grid;grid-template-columns:1fr 310px;align-items:center;gap:40px;margin-bottom:34px}
.section-heading h2 {max-width:740px}
.certificate-photo {width:100%;padding:7px;transform:rotate(1deg)}
.formation-cards {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.formation-card {position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;min-height:228px;padding:25px 22px;border:1px solid var(--line);border-radius:19px;background:#fff;box-shadow:0 9px 25px rgba(7,22,94,.055);transition:transform .25s ease,box-shadow .25s ease}
.formation-card::before {content:"";position:absolute;top:-36px;right:-36px;width:110px;height:110px;border-radius:50%;background:rgba(9,78,163,.06)}
.formation-card:hover {transform:translateY(-4px);box-shadow:var(--shadow)}
.card-index {font-size:.95rem;color:var(--blue);letter-spacing:.12em;font-weight:900;margin-bottom:40px}
.formation-card h3 {position:relative;color:var(--navy);font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.34;margin:0;font-weight:700}
.formation-card p {color:var(--muted);font-size:.94rem;margin:10px 0 0}

.experience-section {position:relative;overflow:hidden;background:linear-gradient(105deg,#07165e,#0a2e86);padding:clamp(65px,7vw,106px) 0;color:#fff}
.experience-section::before {content:"";position:absolute;border:1px solid rgba(255,255,255,.12);width:480px;height:480px;border-radius:50%;left:-200px;top:-210px}
.experience-grid {display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(30px,4vw,64px);align-items:center;position:relative}
.experience-copy h2 {color:#fff;font-size:clamp(2.4rem,5.1vw,4.45rem)}
.experience-copy h2 span {color:#c5dbfd}
.experience-copy p {color:#e3edff;font-size:1.1rem;margin:0}
.conference-photo {background:#f2f6fc;border-color:rgba(255,255,255,.25);border-radius:20px;transform:rotate(-.65deg)}

.modalities {background:#fff}
.modalities-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,5vw,75px)}
.modalities-info p {color:var(--muted);font-size:1.14rem;max-width:480px;margin-bottom:26px}
.modality-tags {display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:520px}
.modality {min-height:125px;display:flex;flex-direction:column;justify-content:space-between;gap:15px;background:#f3f7fd;border:1px solid rgba(7,22,94,.13);border-radius:18px;padding:20px}
.modality-icon {color:var(--blue);font-weight:900;letter-spacing:.16em;font-size:.77rem}
.modality strong {font-family:var(--serif);color:var(--navy);font-size:1.65rem}
.office-photo {max-width:560px;justify-self:center;transform:rotate(.6deg)}

.topics {background:linear-gradient(180deg,#eef4fd,#f9fbff)}
.centered-heading {text-align:center;max-width:850px;margin:0 auto 36px}
.centered-heading h2 {margin-bottom:0}
.topics-photos {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:center;margin-bottom:31px}
.topics-photos .photo-frame {background:#fff}
.topic-list {display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.topic-list span {display:inline-flex;align-items:center;text-align:center;padding:12px 20px;background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:999px;font-weight:700;box-shadow:0 8px 18px rgba(7,22,94,.05)}

.gallery {background:#fff}
.gallery-grid {display:grid;grid-template-columns:1fr .9fr;gap:clamp(30px,8vw,100px);align-items:center;max-width:1000px}
.gallery-info h2 {max-width:540px}
.gallery-info p {font-size:1.17rem;color:var(--muted);margin-bottom:28px}
.gallery-detail {display:inline-flex;color:var(--navy);padding:13px 20px;border:1px solid var(--line);background:#eaf1fa;border-radius:999px;font-weight:700}
.personal-photo {width:min(100%,370px);justify-self:center}

.contact-section {position:relative;background:var(--navy-dark);color:#fff;overflow:hidden}
.contact-section::before {content:"";position:absolute;right:-180px;top:-180px;border-radius:50%;width:550px;height:550px;background:rgba(255,255,255,.04)}
.contact-grid {position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,6vw,90px);align-items:center}
.contact-content h2 {color:white;font-size:clamp(2.4rem,4.7vw,4.2rem)}
.contact-content p {margin:0 0 4px;color:#e3eafa}
.contact-buttons {margin-top:26px}
.button-white {background:#fff;color:var(--navy)}
.button-border-white {border:1px solid rgba(255,255,255,.45);color:#fff}
.contact-details {padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:23px;background:rgba(255,255,255,.075);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.contact-item {display:grid;grid-template-columns:minmax(85px,.45fr) minmax(0,1fr);align-items:center;gap:15px;padding:17px 15px;border-bottom:1px solid rgba(255,255,255,.16)}
.contact-item:last-child {border-bottom:none}
.contact-item span {color:#c7d6f0;font-size:.9rem}
.contact-item strong {color:#fff;font-size:1.05rem;text-align:right;overflow-wrap:anywhere}
a.contact-item:hover strong {text-decoration:underline;text-underline-offset:4px}
.footer {background:#0753a2;color:#fff;padding:27px 0}
.footer-inner {display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-inner strong {font-size:1.05rem}
.footer-inner p {margin:4px 0 0;color:#e5effc;font-size:.93rem}
.footer-inner a {font-weight:800}
.floating-whatsapp {position:fixed;right:20px;bottom:20px;z-index:65;display:grid;place-items:center;width:61px;height:61px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.22);transition:transform .2s ease}
.floating-whatsapp:hover {transform:scale(1.07)}
.floating-whatsapp svg {width:35px;height:35px;fill:currentColor}

@media(max-width:1060px) {
  .hero-grid {grid-template-columns:1.05fr .95fr;gap:22px}
  .hero h1 {font-size:clamp(3.1rem,6.4vw,5rem)}
  .formation-cards {grid-template-columns:repeat(2,minmax(0,1fr))}
  .formation-card {min-height:190px}
  .card-index {margin-bottom:26px}
}
@media(max-width:819px) {
  .nav {min-height:75px}
  .brand-icon {width:48px;height:48px;flex-basis:48px;font-size:30px;border-radius:14px}
  .brand-names strong {font-size:1.04rem}
  .brand-names small {font-size:.59rem}
  .menu-button {display:block}
  .menu {position:absolute;top:calc(100% + 7px);left:22px;right:22px;display:none;flex-direction:column;align-items:stretch;gap:4px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 52px rgba(7,22,94,.15)}
  .menu.is-open {display:flex}
  .menu a {display:block;padding:13px 15px}
  .hero-grid {grid-template-columns:1fr;min-height:auto;gap:35px;padding-top:60px;padding-bottom:58px}
  .hero-content {max-width:600px}
  .hero h1 {font-size:clamp(3.1rem,9.3vw,5.2rem)}
  .hero-showcase {max-width:450px}
  .hero-portrait {max-width:320px}
  .intro-grid,.experience-grid,.modalities-grid,.gallery-grid,.contact-grid {grid-template-columns:1fr}
  .formation-heading {grid-template-columns:1fr 260px;gap:25px}
  .experience-copy h2 {max-width:600px}
  .conference-photo {max-width:640px}
  .office-photo {max-width:550px;width:100%;justify-self:center}
  .gallery-grid {max-width:700px}
  .personal-photo {justify-self:start}
}
@media(max-width:570px) {
  .container {width:min(100% - 30px,1180px)}
  .nav .brand {gap:9px}
  .brand-names strong {font-size:.96rem}
  .brand-names small {font-size:.54rem;letter-spacing:.045em}
  .hero-grid {padding-top:47px}
  .hero h1 {font-size:clamp(2.8rem,12.8vw,4rem)}
  .hero-subtitle {font-size:.83rem;letter-spacing:.065em}
  .hero-actions {display:grid;grid-template-columns:1fr}
  .experience-banner {max-width:100%}
  .hero-appointment {max-width:360px;padding:13px 8px}
  .hero-appointment a {font-size:1.04rem}
  .formation-heading {grid-template-columns:1fr;gap:20px}
  .certificate-photo {max-width:400px}
  .formation-cards {grid-template-columns:1fr}
  .formation-card {min-height:145px}
  .card-index {margin-bottom:17px}
  .modality-tags {grid-template-columns:1fr}
  .modality {min-height:97px}
  .topics-photos {grid-template-columns:1fr;gap:20px}
  .topic-list span {width:100%;justify-content:center}
  .contact-item {grid-template-columns:1fr;gap:4px}
  .contact-item strong {text-align:left}
  .contact-buttons {display:grid;grid-template-columns:1fr}
  .footer-inner {display:grid;grid-template-columns:1fr;gap:15px}
  .photo-frame {padding:6px;border-radius:19px}
  .photo-frame img {border-radius:13px}
  .section-spacing {padding:68px 0}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition:none!important;animation:none!important}
}