/* =========================
   TABLE OF CONTENTS
   1) Global: Variables
   2) Global: Base / Layout / Typography
   3) Global: Components
   4) Page: index.html (Hero, Bio, Modal)
   5) Page: thankyou1.html (Survey)
   6) Page: thankyou2.html (Topbar, Lessons, Upsell)
   7) Global: Utilities / Fixes / Responsive
========================= */

/* =========================
   Ingenia Tech — UI System
   Paleta:
   Primary:   #2a3c62  #df823a
   Secondary: #31f1ff  #22c55e  #d74f3c
   Neutrals:  #333333
   Notes:
   - No usa imágenes de fondo
   - Look & feel dark + acentos de marca
========================= */

:root{
  --brand-navy:#2a3c62;
  --brand-orange:#df823a;

  --brand-cyan:#31f1ff;
  --brand-green:#22c55e;
  --brand-red:#d74f3c;
  --brand-light-gray:#f8f9fa;
  --brand-gray:#666666;
  --brand-dark-gray:#333333;

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --ink:#0b1020;
  --text:#f5f7ff;
  --muted:rgba(245,247,255,.72);

  --bg0:#0a1022;
  --bg1:#0c1430;

  --panel:rgba(255,255,255,.06);
  --panel-strong:rgba(255,255,255,.09);

  --line:rgba(49,241,255,.18);
  --line-soft:rgba(255,255,255,.12);

  --accent:var(--brand-cyan);
  --accent-2:var(--brand-orange);

  --radius:18px;
  --max:1120px;
  --gap:28px;
  --shadow:0 18px 55px rgba(0,0,0,.45);

  --focus:0 0 0 4px rgba(49,241,255,.22);
}

/* =========================
   GLOBAL: Base / Layout / Typography
========================= */
/* Base */
*{box-sizing:border-box}
html,body{min-height:100%}
html{background:linear-gradient(180deg, var(--bg0), var(--bg1));}
body{min-height:100%; overflow-x:hidden;}
body{
  margin:0;
  font-family: var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 520px at 15% 12%, rgba(49,241,255,.12), transparent 60%),
    radial-gradient(700px 520px at 85% 18%, rgba(223,130,58,.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit}
.container{width:min(var(--max), 92vw); margin:0 auto}

/* Sections */
section{
  padding:56px 0;
  border-top:1px solid var(--line-soft);
}
section:first-of-type{border-top:none}

/* Typography */
.h1{
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.08;
  margin:0 0 16px;
  font-weight:950;
  letter-spacing:-.02em;
}
.h2{
  /* si quieres h2 más pequeño: baja este clamp */
  font-size:clamp(18px, 2.1vw, 28px);
  line-height:1.15;
  margin:0 0 14px;
  font-weight:900;
}
.h3{
  font-size:clamp(20px, 2vw, 22px);
  line-height:1.2;
  margin:0 0 10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.h4{
  font-size:clamp(14px, 1.6vw, 18px);
  line-height:1.2;
  margin:0 0 10px;
  font-weight:800;
}
.h0 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-style: italic;
  line-height:1.15;
  margin:0 0 14px;
  font-weight:900;
}
.lead{
  font-size:16px;
  line-height:1.6;
  margin:0 0 16px;
  max-width:68ch;
  color:var(--text);
}
.muted{
  color:var(--muted);
  line-height:1.6;
  margin:0;
  max-width:72ch;
}

.accent{color:var(--brand-orange); font-weight:950}
.accent-light{color:var(--brand-cyan); font-weight:900}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  margin:18px 0;
}

/* Layout */
.grid-2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:var(--gap);
  align-items:stretch;
}
.grid-2.flip{grid-template-columns: .95fr 1.05fr;}
@media (max-width: 920px){
  .grid-2,.grid-2.flip{grid-template-columns:1fr}
}

/* Panels / cards */
.panel{
  background:linear-gradient(180deg, var(--panel-strong), var(--panel));
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-inner{padding:28px}

/* Media placeholders */
.media{
  min-height:420px;
  position:relative;

  /* El contenedor define el “box” y la imagen se adapta dentro */
  display:flex;
  align-items:stretch;
  justify-content:stretch;

  overflow:hidden;
  border-radius:22px;
  aspect-ratio: 4 / 5;

  background:
    linear-gradient(135deg, rgba(49,241,255,.10), rgba(255,255,255,.03)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 10px, rgba(255,255,255,.03) 10px 20px);

  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}

@media (max-width: 920px){
  .media{border-left:none; border-top:1px solid var(--line-soft)}
  /* Mobile: oculta la imagen principal del hero */
  #seccion-1 .media{display:none}
}
.media.rounded{border-radius:var(--radius)}
.ph{
  width:78%;
  height:72%;
  border:2px dashed rgba(49,241,255,.26);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
  color:rgba(245,247,255,.78);
  background:rgba(0,0,0,.18);
}
.ph .icon{
  width:54px; height:54px;
  border-radius:14px;
  border:2px solid rgba(49,241,255,.26);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  font-size:22px;
  color:rgba(245,247,255,.86);
}

/* Hero: foto principal en el placeholder de imagen */
.hero-photo{
  width:100%;
  height:100%;
  object-fit: cover; /* recorta sin deformar */
  display:block;
}

.bio-bullets{
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.6;
}
.bio-bullets li{
  margin: 8px 0;
  color: rgba(245,247,255,.88);
}
.bio-bullets li::marker{
  color: var(--brand-orange);
}

/* =========================
   GLOBAL: Components
========================= */
/* Actions / Buttons */
.actions{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:18px;
  width:100%;
}
.btn{
  width:100%;
  max-width:560px;
  appearance:none;
  border:none;
  cursor:pointer;
  background:var(--brand-navy);   /* botón azul */
  color:#ffffff;                  /* letras blancas */
  font-weight:950;
  font-size:20px;                 /* letras más grandes */
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(49,241,255,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  text-align:center;
  transition:transform .08s ease, opacity .12s ease, filter .12s ease;
}
.btn.primary{
  background:var(--brand-orange);
  color:#fff;
}
.btn.secondary{
  background:var(--brand-orange);
  text-decoration: none;
}
.btn.secondary:hover, .btn.secondary:active, .btn.secondary:visited {
  text-decoration: none;
}
.btn:hover{opacity:.95; filter:saturate(1.06)}
.btn:active{transform:translateY(1px)}

/* Center helpers */
.center{text-align:center}
.center .muted{margin:0 auto; max-width:85ch}
.center .h2{margin-left:auto; margin-right:auto}

/* Footer */
footer{
  padding:54px 0 70px;
  border-top:1px solid var(--line-soft);
}
.legal{
  margin-top:18px;
  padding:18px;
  border:1px dashed rgba(49,241,255,.26);
  border-radius:14px;
  color:var(--muted);
  line-height:1.7;
  background:rgba(255,255,255,.04);
  text-align:left;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

/* Footer legal simple (sin contorno, márgenes estándar, 12px) */
.footer-legal{
  margin-top: 18px;
  padding: 0;                /* sin caja */
  border: none;              /* sin borde punteado */
  background: transparent;   /* sin fondo */
  color: var(--brand-gray);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;          /* más legible para legales largos */
}

/* =========================
   PAGE: index.html - Modal
========================= */
/* MODAL (index.html) */
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(10, 16, 34, .62);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:9999;
}
.modal-overlay.is-open{display:flex}

.modal{
  width:min(640px, 94vw);
  background: #0f1730; /* sólido (sin transparencia) */
  border:1px solid rgba(49,241,255,.22);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  color:var(--text);
}
.modal-header{
  position:relative;
  padding:22px 22px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background: rgba(42,60,98,.28); /* leve tono navy, NO transparente total */
}
.modal-body{
  padding:18px 22px 22px;
  background: #0f1730; /* asegura consistencia */
  overflow:hidden; /* evita scrolls/vibracion por auto-resize del iframe */
}
.modal-title{
  margin:0;
  font-weight:950;
  letter-spacing:.02em;
  font-size:clamp(20px, 2.5vw, 28px);
  text-transform:uppercase;
  color: var(--brand-orange);
  text-align:center;
}
.modal-subtitle{
  margin:10px 0 0;
  font-weight:900;
  font-size:clamp(16px, 2.2vw, 20px);
  text-align:center;
  color: var(--text);
}
.modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(49,241,255,.24);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  color: rgba(245,247,255,.8);
}
.form{display:grid; gap:14px}
.field label{
  display:block;
  font-weight:850;
  color: var(--text);
  margin:0 0 8px;
}
.req{color: var(--brand-orange)}
.input,.select{
  width:100%;
  padding:14px 14px;
  border-radius:12px;
  border:1px solid rgba(49,241,255,.22);
  background:rgba(10,16,34,.35);
  color:var(--text);
  outline:none;
  font-size:16px;
}
.input::placeholder{color:rgba(245,247,255,.55)}
.input:focus,.select:focus{
  border-color: rgba(49,241,255,.55);
  box-shadow: var(--focus);
}
.modal-actions{margin-top:6px; display:flex; justify-content:center}
.modal .btn{max-width:100%}
.modal-footnote{
  margin:14px 0 0;
  color: var(--muted);
  font-size:13px;
  line-height:1.5;
  text-align:center;
}

/* =========================
   THANKYOU 1 — Survey styles
========================= */
/* =========================
   PAGE: thankyou1.html - Survey
========================= */
header{
  padding:54px 0 28px;
  border-bottom:1px solid var(--line-soft);
}
.brand{
  font-size: clamp(26px, 3.2vw, 40px);
  font-style: italic;
  line-height:1.15;
  margin:0 0 14px;
  font-weight:900;
}
.tagline{
  margin:8px 0 0;
  /*text-align:left;*/
  color:var(--muted);
  font-weight:850;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
}
.title{
  margin:18px 0 0;
  text-align:center;
  font-size:clamp(18px, 2.2vw, 26px);
  font-weight:950;
}
.subtitle{
  margin:10px auto 0;
  text-align:center;
  color:var(--muted);
  max-width:80ch;
  line-height:1.5;
  font-size:14px;
}

.video-wrap{display:flex; justify-content:center; margin-top:22px}
.video{
  width:min(980px, 100%);
  aspect-ratio:16/9;
  border:1px solid rgba(49,241,255,.24);
  border-radius:14px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.04);
}
.video::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    45deg,
    rgba(49,241,255,.08) 0 12px,
    rgba(255,255,255,.03) 12px 24px
  );
}
.video .ph{position:relative; z-index:1; background:rgba(0,0,0,.18)}
.video iframe{
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  min-height:220px;
  border:0;
}

body > .ty-section:first-of-type .video{
  padding:12px;
}
body > .ty-section:first-of-type .video .ph{
  width:100%;
  height:100%;
  padding:0;
  border:none;
  background:transparent;
}
body > .ty-section:first-of-type .video .ph > div{
  width:100%;
  height:100%;
}
.arrows{
  margin:18px 0 0;
  display:block;
  width:1ch;
  color:var(--brand-orange);
  font-weight:950;
  font-size:30px;
  line-height:.9;
  letter-spacing:0;
  user-select:none;
  margin-inline:auto;
  text-align:center;
  word-break:break-all;
  overflow-wrap:anywhere;
  animation: arrows-bounce 1.35s ease-in-out infinite;
}

@keyframes arrows-bounce{
  0%, 100%{
    transform: translateY(0);
    opacity:.45;
  }
  25%{
    transform: translateY(4px);
    opacity:.75;
  }
  55%{
    transform: translateY(12px);
    opacity:1;
  }
  75%{
    transform: translateY(6px);
    opacity:.85;
  }
}

/* Form shell */
.form-shell{width:min(760px, 100%); margin:0 auto}
form{margin:0}
.field{margin:0 0 14px}
label{display:block; font-weight:850; margin:0 0 8px}
.row{
  display:grid;
  grid-template-columns: 1fr 52px;
  gap:10px;
  align-items:stretch;
}
.mini-btn{
  border-radius:12px;
  border:1px solid rgba(49,241,255,.22);
  background:var(--brand-navy);
  color:#fff;
  font-weight:950;
  cursor:pointer;
  font-size:18px;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
}
.mini-btn:active{transform:translateY(1px)}

/* Questions */
.q{
  margin:16px 0 18px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.q:first-of-type{border-top:none; padding-top:0}
.q-title{font-weight:950; margin:0 0 10px}
.options{display:grid; gap:10px}

.opt{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text);
}
.opt input[type="radio"]{
  margin-top:3px;
  width:18px;
  height:18px;
  accent-color: var(--brand-orange);
  cursor:pointer;
}
.opt span{line-height:1.35; color:var(--text)}

/* WhatsApp */
.phone-row{
  display:grid;
  grid-template-columns: 210px 1fr;
  gap:10px;
}
.country-select{
  width:100%;
  padding:14px 12px;
  border-radius:12px;
  border:1px solid rgba(49,241,255,.22);
  background:rgba(10,16,34,.35);
  color:var(--text);
  outline:none;
  font-size:16px;
}
.country-select:focus{box-shadow:var(--focus); border-color:rgba(49,241,255,.55)}

/* Submit area */
.submit-wrap{margin-top:16px}
.helper{
  margin-top:0px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.bullets{
  margin-top:14px;
  display:grid;
  gap:8px;
  color:var(--muted);
  font-size:13px;
}
.bullets span{display:flex; gap:10px; align-items:flex-start}

/* =========================
   THANKYOU 2 — Topbar, lessons, upsell
========================= */

/* =========================
   PAGE: thankyou2.html - Topbar, lessons, upsell
========================= */
/* Top urgency bar */
.topbar{
  background: var(--brand-orange);
  border-bottom:1px solid rgba(49,241,255,.18);
  padding:14px 0;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:nowrap;
}
@media (max-width: 860px){
  .topbar-inner{flex-wrap:wrap}
}
.topbar-text{
  margin:0;
  font-weight:950;
  line-height:1.35;
  color:#ffffff;
  flex:1;
}
.topbar-text .accent {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.timer{
  display:flex;
  gap:10px;
  align-items:stretch;
  justify-content:flex-end;
  flex:0 0 auto;
}
.tbox{
  min-width:74px;
  border:1px solid rgba(49,241,255,.28);
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
  background: var(--brand-light-gray);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.tval{
  font-size:20px;
  font-weight:950;
  line-height:1;
  color: var(--brand-dark-gray);
}
.tlabel{
  font-size:11px;
  color:var(--brand-dark-gray);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:6px;
  font-weight:850;
}

/* TY2 Sections */
.ty-section{
  padding:46px 0;
  border-bottom:1px solid var(--line-soft);
}

/* WhatsApp button */
.btn-wa{
  background:var(--brand-green);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:950;
  text-decoration:none;
}
.btn-wa:hover,
.btn-wa:active,
.btn-wa:visited,
.btn-wa:focus{
  color:#fff;
  text-decoration:none;
}
.btn-wa:hover{filter:saturate(1.08)}
.btn-wa svg{vertical-align:-3px; margin-right:10px}

/* Lessons grid */
.lessons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
@media (max-width: 980px){
  .lessons{grid-template-columns:1fr}
}
.lesson{
  border:1px solid rgba(49,241,255,.18);
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
}
.lesson-head{
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pill{
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:var(--brand-orange);
  padding:8px 10px;
  border-radius:999px;
}
.lesson-body{
  padding:16px 14px;
  min-height:120px;
  display:grid;
  align-content:start;
  gap:10px;
}
.lesson-title{margin:0; font-weight:950; line-height:1.2}
.lesson-meta{margin:0; color:var(--muted); font-size:13px; line-height:1.5}
.lesson-thumb{
  margin-top:6px;
  border:2px dashed rgba(49,241,255,.20);
  border-radius:12px;
  padding:14px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.play{
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid var(--brand-orange);
  color:var(--brand-orange);
  display:grid;
  place-items:center;
  font-weight:950;
  flex:0 0 auto;
}

/* Upsell two-col */
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
  margin-top:18px;
}
@media (max-width: 980px){
  .two-col{grid-template-columns:1fr}
}
.calendar{
  box-shadow:var(--shadow);
  overflow:hidden;
}
.calendar-head{
  padding:14px;
  border-bottom:1px solid var(--line-soft);
  font-weight:950;
}
.calendar-ph{
  height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.calendar-ph::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    135deg,
    rgba(49,241,255,.08) 0 14px,
    rgba(255,255,255,.03) 14px 28px
  );
}
.calendar-ph .ph{position:relative; z-index:1; width:82%; height:78%}

.lc-iframe{
  width:100%;
  height: 790px;            /* ajustado para evitar espacio en blanco */
  border:0;
  outline:0;
  display:block;
  overflow:hidden;
}


/* En móvil normalmente necesita más alto */
@media (max-width: 520px){
  .lc-iframe{height: 740px;}
}

/* "Qué sigue" block */
.next-title{
  text-align:center;
  font-size:clamp(20px, 2.6vw, 34px);
  font-weight:950;
  margin:0 0 16px;
}
.callout{width:min(860px, 100%); margin:0 auto}
.callout .panel-inner{text-align:center; padding:28px}
.callout h3{
  margin:0;
  font-size:clamp(16px, 2vw, 22px);
  font-weight:950;
}
.callout p{
  margin:10px auto 0;
  color:var(--muted);
  max-width:80ch;
  line-height:1.55;
}

/* =========================
   GLOBAL: Utilities
========================= */
.m-0{margin:0}
.mt-neg-6{margin-top:-6px}
.mt-0{margin-top:0}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-18{margin-top:18px}
.mt-22{margin-top:22px}
.mb-6{margin-bottom:6px}
.mb-10{margin-bottom:10px}
.mb-14{margin-bottom:14px}
.text-left{text-align:left}
.fw-950{font-weight:950}

/* Small utilities */
.spacer-8{height:8px}
.spacer-14{height:14px}


/* =========================
   GLOBAL: Fixes / Responsive
========================= */
/* =========================
   FIXES: separación de secciones + móvil + fondos
========================= */

/* Separación visible entre secciones (sin “cortes” de fondo) */
section{
  position:relative;
  background: rgba(255,255,255,.015);
}
section:nth-of-type(even){
  background: rgba(255,255,255,.03);
}

/* Asegura que header y footer (thankyou1) también “tengan fondo” consistente */
header, footer{
  background: rgba(255,255,255,.015);
}

/* THANKYOU 2: secciones usan .ty-section (override suave) */
.ty-section{
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
}

/* Calendario: que se vea como panel (evita parches blancos alrededor) */
.calendar{
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;      /* clip del widget */
  isolation: isolate;    /* clipping iOS */
  padding: 0;
}
.calendar-embed{
  width:100%;
  overflow:hidden;
  border:0;
  border-radius:0;
  background: transparent; /* evita franja blanca si sobra altura */
}

/* Mejor wrap del topbar en móvil */
@media (max-width: 520px){
  section{padding:38px 0;}
  .ty-section{padding:38px 0;}

  .panel-inner{padding:20px;}
  .btn{font-size:18px; padding:14px 16px;}

  .topbar-inner{gap:10px;}
  .timer{width:100%; justify-content:space-between; flex-wrap:wrap;}
  .tbox{min-width:64px; padding:8px 10px;}
  .tval{font-size:18px;}

  .media{min-height:320px;}

  body > .ty-section:first-of-type .video{
    padding:8px;
    border-radius:12px;
  }

  .video iframe{
    min-height:180px;
  }
}


/* =========================
   PAGE: index.html - Bio (Sección 2)
========================= */
/* =========================
   PERFIL (SECCIÓN BIO)
========================= */
.profile-panel,
.bio-photo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.profile-ring{
  width: clamp(240px, 50vw, 440px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;

  /* “aro” y fondo tipo referencia */
  padding: 5px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 30% 20%, rgba(223,130,58,.18), rgba(0,0,0,0) 55%);
  border: 6px solid rgba(223,130,58,.55);
  box-shadow:
    0 28px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(223,130,58,.14);
  overflow:hidden;      /* recorta cualquier borde del PNG */
}

.profile-img{
  width:100%;
  height:100%;
  display:block;
  border-radius: 999px;
  object-fit: cover;    /* recorte perfecto circular */
  object-position: 50% 30%;
}

#seccion-2 .grid-2{align-items:center;}

/* Mobile: mantiene proporción, evita que “empuje” el layout */
@media (max-width: 520px){
  .profile-panel{padding:20px;}
  .profile-ring{width: min(300px, 92vw); padding:12px; border-width:5px;}
}


/* =========================
   BIO (SECCIÓN 2): UNA SOLA CAJA
========================= */
.bio-card-inner{padding: 28px;}
.bio-card-grid{
  display: grid;
  grid-template-columns: minmax(360px, 520px) 1fr;
  gap: 30px;
  align-items: center; /* centra verticalmente la foto vs el texto */
}

.bio-card-copy{
  min-width: 0;
}

/* === FIX: foto siempre circular (no óvalo) === */
.bio-card .profile-ring{
  border-radius: 50%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  /* refuerzo del cuadrado */
  aspect-ratio: 1 / 1;
  width: min(520px, 100%);
  max-height: 520px;
  overflow: hidden;
}

.bio-card .profile-img{
  border-radius: 50%;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* evita “stretch” raro en algunos layouts */
.bio-card-photo{
  align-self: center;
  justify-self: center;
}
/* fallback para navegadores que no respetan aspect-ratio en ciertos casos */
@supports not (aspect-ratio: 1 / 1){
  .bio-card .profile-ring{
    width: min(520px, 92vw);
    height: min(520px, 92vw);
  }
}
@media (max-width: 900px){
  .bio-card-inner{padding: 24px;}
  .bio-card-grid{grid-template-columns: 1fr; gap: 18px;}
  .bio-card-copy{max-width: 62ch; margin: 0 auto;}
}
@media (max-width: 1152px){
  .bio-card .profile-ring{
    width: min(520px, 42vw);
    height: min(520px, 42vw);   /* <- clave: obliga cuadrado */
    aspect-ratio: auto;         /* evita bugs de aspect-ratio en algunos layouts */
    border-radius: 50%;
    overflow: hidden;
  }
}

/* =========================
   PAGE: index.html - Hero (Sección 1)
========================= */
/* =========================
   OPTION A — FOTO REAL (premium, sobrio)
   - Integra el PNG en fondo oscuro sin glow llamativo
   - Sombra realista + viñeta suave
========================= */

#seccion-1 .media{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* atmósfera discreta (casi imperceptible) */
  background:
    radial-gradient(650px 460px at 60% 35%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Viñeta para que no se note ningún borde claro del recorte */
#seccion-1 .media::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index: 1;

  background:
    radial-gradient(120% 95% at 50% 28%, rgba(10,16,34,0) 44%, rgba(10,16,34,.55) 100%),
    linear-gradient(180deg, rgba(10,16,34,.05), rgba(10,16,34,.22));

  opacity: .95;
}

/* Imagen: integración limpia + sombra natural */
#seccion-1 .hero-photo{
  position: relative;
  z-index: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;

  /* clave: “desaparece” el blanco del PNG sobre fondo oscuro */
  mix-blend-mode: multiply;

  /* look real: casi sin retoque */
  filter:
    brightness(1.05)
    contrast(1.03)
    saturate(1.02)
    drop-shadow(0 22px 48px rgba(0,0,0,.55));
}

/* Micro-separación del fondo (muy sutil, evita “pegote”) */
#seccion-1 .media{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06);
  border-radius: 18px; /* si tu layout usa radios; ajusta si ya tienes otro */
}

/* Fallback si blend-mode no aplica */
@supports not (mix-blend-mode: multiply){
  #seccion-1 .hero-photo{
    mix-blend-mode: normal;
    opacity: .99;
  }
}