/* ============================================================
   TRAZO — HOMEPAGE SECTIONS
   ============================================================ */
.s-head{max-width:60ch;margin-bottom:var(--sp-8)}
.s-head .eyebrow{margin-bottom:var(--sp-4)}
.s-head h2{font-size:var(--fs-h2);line-height:var(--lh-head);margin-bottom:var(--sp-4)}
.s-head h2 em{font-style:normal;color:var(--gold-bright)}
.s-head p{color:var(--ash);max-width:54ch}
.coal{background:var(--coal)}

/* ===================== TRUST STRIP ===================== */
.trust{border-block:1px solid var(--line);background:var(--coal)}
.trust__row{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2.5rem);
  padding-block:var(--sp-5);flex-wrap:wrap}
.trust__item{display:flex;flex-direction:column;gap:2px;min-width:0}
.trust__item b{font-family:var(--serif);font-weight:400;color:var(--ivory);font-size:1.02rem;letter-spacing:.01em}
.trust__item small{font-size:.72rem;letter-spacing:.04em;color:var(--ash-dim)}
.trust__sep{flex:0 0 1px;align-self:stretch;background:var(--line)}
@media(max-width:760px){
  .trust__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-6)}
  .trust__sep{display:none}
}

/* ===================== EL MÉTODO ===================== */
.metodo{position:relative;overflow:hidden}
.metodo__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.metodo__media{position:relative;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
/* height:auto es necesario: si el <img> trae atributo height, éste fija la altura
   y deja sin efecto el aspect-ratio (que solo actúa con una dimensión en auto) */
.metodo__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;display:block;filter:grayscale(.12) contrast(1.02)}
.metodo__media figcaption{position:absolute;left:0;bottom:0;padding:var(--sp-5);font-size:var(--fs-eyebrow);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.metodo__lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem, 1rem + 1.9vw, 2.5rem);
  line-height:1.32;color:var(--ivory);margin-top:var(--sp-4)}
.metodo__lead em{font-style:normal;color:var(--gold-bright)}
.metodo__body{margin-top:var(--sp-5);color:var(--ash)}
.metodo__points{margin-top:var(--sp-6);display:grid;gap:0;border-top:1px solid var(--line)}
.mp{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.mp__n{font-family:var(--serif);color:var(--gold);font-size:.95rem;letter-spacing:.05em}
.mp__t{color:var(--ivory);font-size:var(--fs-small);letter-spacing:.02em}
@media(max-width:860px){.metodo__grid{grid-template-columns:1fr}.metodo__media{order:-1;max-width:460px}}

/* ===================== PROCEDIMIENTOS ===================== */
.proc__grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.proc-card{position:relative;display:flex;flex-direction:column;padding:clamp(1.8rem,3vw,2.8rem);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-decoration:none;
  transition:background var(--dur) var(--ease);overflow:hidden}
.proc-card:nth-child(2n){border-right:0}
.proc-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line-grad);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease)}
.proc-card:hover{background:var(--surface)}
.proc-card:hover::before{transform:scaleX(1)}
.proc-card__n{font-family:var(--serif);font-size:.95rem;color:var(--gold);letter-spacing:.05em}
.proc-card__t{font-family:var(--serif);font-size:clamp(1.4rem, 1.1rem + 1vw, 1.9rem);color:var(--ivory);margin:var(--sp-5) 0 var(--sp-3);line-height:1.15}
.proc-card__d{font-size:var(--fs-small);color:var(--ash);margin-bottom:var(--sp-6);flex:1}
.proc-card__foot{display:flex;align-items:center;justify-content:space-between}
.proc-card__tag{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.proc-card__foot svg{color:var(--gold);transition:transform var(--dur) var(--ease)}
.proc-card:hover .proc-card__foot svg{transform:translateX(5px)}
@media(max-width:680px){.proc__grid{grid-template-columns:1fr}.proc-card{border-right:0}}

/* ---- category cards (grouped procedures) ---- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.9rem,1.5vw,1.4rem)}
.cat-card{position:relative;overflow:hidden;display:flex;flex-direction:column;grid-column:span 2;
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:clamp(1.6rem,2.4vw,2.4rem);background:rgba(255,255,255,.012);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.cat-card:nth-child(4),.cat-card:nth-child(5){grid-column:span 3}
.cat-card:hover{border-color:var(--gold-deep);background:var(--surface)}
.cat-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line-grad);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease)}
.cat-card:hover::before{transform:scaleX(1)}
.cat-card__head{display:flex;align-items:center;gap:var(--sp-4)}
.cat-card__n{font-family:var(--serif);font-size:.95rem;color:var(--gold);letter-spacing:.05em}
.cat-card__rule{flex:1;height:1px;background:var(--line);transition:background var(--dur) var(--ease)}
.cat-card:hover .cat-card__rule{background:var(--gold-deep)}
.cat-card__t{font-family:var(--serif);font-size:clamp(1.3rem, 1rem + .9vw, 1.7rem);color:var(--ivory);margin:var(--sp-4) 0 var(--sp-3)}
.cat-card__d{color:var(--ash-dim);font-size:var(--fs-small);line-height:1.6;margin-bottom:var(--sp-5);max-width:52ch}
.cat-card__list{list-style:none;display:grid;gap:var(--sp-3);flex:1;align-content:start}
.cat-card__list li{position:relative;padding-left:1.15em;color:var(--ash);font-size:var(--fs-small);line-height:1.45}
.cat-card__list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cat-card__cta{display:inline-flex;align-items:center;gap:.7em;margin-top:var(--sp-6);
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);transition:color var(--dur) var(--ease)}
.cat-card__cta svg{color:var(--gold);transition:transform var(--dur) var(--ease)}
.cat-card__cta:hover{color:var(--gold-bright)} .cat-card__cta:hover svg{transform:translateX(5px)}
.cat-note{margin-top:clamp(1.4rem,2.5vw,2rem);color:var(--ash-dim);font-size:var(--fs-small);
  display:flex;align-items:center;gap:1em}
.cat-note::before{content:"";width:34px;height:1px;background:var(--gold);flex-shrink:0}
@media(max-width:1080px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .cat-card,.cat-card:nth-child(4),.cat-card:nth-child(5){grid-column:span 1}
  .cat-card:nth-child(5){grid-column:span 2}
}
@media(max-width:640px){
  .cat-grid{grid-template-columns:1fr}
  .cat-card,.cat-card:nth-child(4),.cat-card:nth-child(5){grid-column:span 1}
}

/* ===================== CIRUJANO (E-E-A-T) ===================== */
.cirujano__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.cirujano__media{position:relative}
.cirujano__media .frame{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5}
.cirujano__media .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(.15) contrast(1.02)}
.cirujano__creds{display:grid;gap:var(--sp-4);margin:var(--sp-6) 0}
.cred{display:flex;gap:var(--sp-3);align-items:flex-start}
.cred svg{color:var(--gold);flex-shrink:0;margin-top:3px}
.cred b{color:var(--ivory);font-weight:400;font-family:var(--serif)}
.cred span{color:var(--ash);font-size:var(--fs-small)}
.cirujano__stats{display:flex;gap:clamp(1.6rem,4vw,3rem);flex-wrap:wrap;margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line-soft)}
.stat .n{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);color:var(--ivory);line-height:1}
.stat .n sup{color:var(--gold);font-size:.5em}
.stat .l{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);margin-top:.5rem}
@media(max-width:860px){.cirujano__grid{grid-template-columns:1fr}.cirujano__media{max-width:420px}}

/* ===================== EXPERIENCIA (photo-less) ===================== */
.experiencia{position:relative;padding-block:clamp(5rem,8vw,9rem);display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(180deg,var(--coal),var(--obsidian))}
.experiencia__glow{position:absolute;z-index:0;width:70vw;height:70vw;max-width:900px;max-height:900px;
  right:-14%;top:50%;transform:translateY(-50%);background:radial-gradient(circle,rgba(112,150,209,.12),transparent 60%);filter:blur(50px);pointer-events:none}
.experiencia__inner{position:relative;z-index:2;max-width:46rem}
.experiencia h2{font-size:var(--fs-h1);margin:var(--sp-4) 0}
.experiencia h2 em{font-style:normal;color:var(--gold-bright)}
.experiencia__list{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.experiencia__list li{display:flex;gap:var(--sp-3);align-items:flex-start;list-style:none;color:var(--ash)}
.experiencia__list svg{color:var(--gold);flex-shrink:0;margin-top:3px}
.experiencia__list b{color:var(--ivory);font-weight:400}

/* ===================== TESTIMONIOS ===================== */
.testi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.5vw,1.4rem)}
.testi{position:relative;display:flex;flex-direction:column;margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.012);
  padding:clamp(1.6rem,2.4vw,2.4rem);transition:border-color var(--dur) var(--ease)}
.testi:hover{border-color:var(--gold-deep)}
.testi--feature{grid-column:1/-1}
.testi blockquote{margin:0;flex:1}
.testi blockquote::before{content:"\201C";display:block;font-family:var(--serif);font-size:2.8rem;
  line-height:.6;color:var(--gold);margin-bottom:var(--sp-4)}
.testi p{color:var(--ash);font-size:var(--fs-small);line-height:1.75}
.testi p+p{margin-top:var(--sp-4)}
.testi--feature p{font-size:var(--fs-body);max-width:75ch}
.testi__more{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.testi__more .i18n-es>p:first-child,.testi__more .i18n-en>p:first-child{padding-top:var(--sp-4)}
.testi__toggle{align-self:flex-start;background:none;border:0;cursor:pointer;padding:0;margin-top:var(--sp-5);
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);transition:color var(--dur) var(--ease)}
.testi__toggle:hover{color:var(--gold-bright)}
.testi .lbl--less{display:none}
.testi.open .lbl--more{display:none}
.testi.open .lbl--less{display:inline}
.testi figcaption{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:3px}
.testi figcaption b{font-family:var(--serif);font-weight:400;color:var(--ivory);font-size:1.08rem}
.testi figcaption span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
@media(max-width:1080px){
  .testi__grid{grid-template-columns:1fr 1fr}
  .testi:last-child{grid-column:1/-1}
}
@media(max-width:680px){.testi__grid{grid-template-columns:1fr}.testi:last-child{grid-column:auto}}

/* ===================== RESULTADOS · INSTAGRAM ===================== */
.ig{position:relative;overflow:hidden;background:var(--coal)}
.ig__glow{position:absolute;z-index:0;left:50%;top:50%;width:70vw;height:70vw;max-width:820px;max-height:820px;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(112,150,209,.13),transparent 62%);filter:blur(52px);pointer-events:none}
.ig__inner{position:relative;z-index:2;text-align:center;max-width:44rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.ig__glyph{color:var(--gold);margin-bottom:var(--sp-4)}
.ig h2{margin:var(--sp-4) 0}
.ig h2 em{font-style:normal;color:var(--gold-bright)}
.ig p{color:var(--ash);max-width:52ch}
.ig__btn{margin-top:var(--sp-6)}
.ig__handle{margin-top:var(--sp-4);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim)}

/* ===================== FAQ ===================== */
.faq__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.faq__grid{grid-template-columns:1fr}}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:var(--sp-5) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  font-family:var(--serif);font-size:clamp(1.1rem, 1rem + .6vw, 1.4rem);color:var(--ivory)}
.faq__q .ic{flex-shrink:0;width:24px;height:24px;position:relative}
.faq__q .ic::before,.faq__q .ic::after{content:"";position:absolute;background:var(--gold);transition:transform var(--dur) var(--ease)}
.faq__q .ic::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%)}
.faq__q .ic::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.faq__item.open .faq__q .ic::after{transform:translateX(-50%) scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.faq__a p{padding:0 0 var(--sp-5);color:var(--ash);max-width:62ch}
.faq__item.open .faq__a{max-height:420px}

/* ===================== CONTACTO ===================== */
.contacto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:820px){.contacto__grid{grid-template-columns:1fr}}
.contacto h2{font-size:var(--fs-h1);margin:var(--sp-4) 0}
.contacto__meta{display:grid;gap:var(--sp-4);margin-top:var(--sp-7)}
.contacto__meta a,.contacto__meta div{display:flex;align-items:center;gap:var(--sp-3);color:var(--ash);text-decoration:none;font-size:var(--fs-small)}
.contacto__meta .ic{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);flex-shrink:0}
.contacto__meta a:hover{color:var(--gold-bright)}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:clamp(1.6rem,3vw,2.5rem);display:grid;gap:var(--sp-4)}
.field{display:grid;gap:var(--sp-2)}
.field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:var(--fs-body);color:var(--ivory);
  background:var(--obsidian);border:1px solid var(--line);border-radius:var(--r-xs);padding:.85em 1em;font-weight:300}
.field input::placeholder,.field textarea::placeholder{color:var(--ash-dim)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:110px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:520px){.form__row{grid-template-columns:1fr}}
.form__status{font-size:var(--fs-small);margin:0;min-height:1em;color:var(--ash-dim)}
.form__status.is-ok{color:var(--gold-bright)}
.form__status.is-err{color:#D98787}

/* ===================== FOOTER ===================== */
.footer{background:var(--coal);border-top:1px solid var(--line);padding-block:var(--sp-9) var(--sp-6)}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--sp-7)}
@media(max-width:860px){.footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
@media(max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer__brand b{font-family:var(--serif);color:var(--ivory);font-size:1.5rem}
.footer__brand p{color:var(--ash-dim);font-size:var(--fs-small);margin-top:var(--sp-3);max-width:32ch}
.footer__social{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.footer__social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--ash);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.footer__social a:hover{color:var(--gold-bright);border-color:var(--gold-deep)}
.footer h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-4)}
.footer ul{list-style:none;display:grid;gap:var(--sp-3)}
.footer a{color:var(--ash);font-size:var(--fs-small)}
.footer a:hover{color:var(--gold-bright)}
.footer__bar{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;font-size:.75rem;color:var(--ash-dim)}