:root{
    --crema:      #FFF7EF;
    --crema-2:    #FDEEDC;
    --melocoton:  #F7D9BC;
    --terracota:  #C96A3E;
    --terracota-2:#A9502A;
    --ambar:      #E9A23B;
    --texto:      #3B2A21;
    --texto-suave:#7A6252;
    --blanco:     #FFFFFF;
    --sombra:     0 18px 40px -18px rgba(120, 70, 40, .35);
    --sombra-suave:0 8px 24px -12px rgba(120, 70, 40, .28);
    --radio:      22px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    color:var(--texto);
    background:var(--crema);
    line-height:1.65;
    overflow-x:hidden;
    background-image:
      radial-gradient(circle at 12% 8%,  rgba(233,162,59,.14), transparent 42%),
      radial-gradient(circle at 88% 0%,  rgba(201,106,62,.12), transparent 40%),
      radial-gradient(circle at 50% 100%, rgba(247,217,188,.45), transparent 55%);
    background-attachment:fixed;
  }

  h1,h2,h3{ font-family:'Fraunces', Georgia, serif; line-height:1.15; letter-spacing:-.01em; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:clamp(3.5rem, 9vw, 7rem) 1.5rem clamp(3rem, 7vw, 5.5rem);
    text-align:center;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
    width:min(680px, 88%); height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,106,62,.35), transparent);
  }

  .eyebrow{
    display:inline-block;
    font-size:.82rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    color:var(--terracota);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(201,106,62,.22);
    padding:.45rem 1.1rem; border-radius:999px;
    margin-bottom:1.4rem;
    backdrop-filter: blur(6px);
  }

  .hero h1{
    font-size:clamp(2.4rem, 7.5vw, 4.4rem);
    font-weight:700;
    margin-bottom:1rem;
    background:linear-gradient(180deg, #4A3226 0%, #8A5233 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .tagline{
    max-width:620px; margin:0 auto;
    color:var(--texto-suave);
    font-size:clamp(1rem, 2.4vw, 1.15rem);
  }

  /* ---------- SECCIONES ---------- */
  main{ max-width:1040px; margin:0 auto; padding:0 1.5rem 7rem; }

  section{ padding:clamp(3rem, 7vw, 5rem) 0; }

  .titulo-seccion{
    font-size:clamp(1.7rem, 4.4vw, 2.5rem);
    margin-bottom:.6rem;
  }
  .sub-seccion{ color:var(--texto-suave); margin-bottom:2.5rem; max-width:56ch; }

  /* ---------- SOBRE MÍ ---------- */
  .sobre-mi{
    display:grid;
    grid-template-columns:minmax(0, 340px) minmax(0, 1fr);
    gap:clamp(2rem, 5vw, 4rem);
    align-items:center;
  }

  .foto-wrap{
    position:relative;
    aspect-ratio:4/5;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(150deg, var(--melocoton), var(--crema-2));
    box-shadow:var(--sombra);
    border:6px solid #fff;
    transform:translateY(var(--py, 0px));
    transition:transform .12s linear;
    will-change:transform;
  }
  .foto-wrap::before{
    content:"Tu foto";
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-family:'Fraunces', serif; font-size:1.1rem;
    color:rgba(122,98,82,.6);
    letter-spacing:.05em;
  }
  .foto-wrap img{
    position:relative; z-index:1;
    width:100%; height:100%;
    object-fit:cover; display:block;
  }
  .foto-col{ position:relative; }
  .foto-col::before{
    content:"";
    position:absolute; inset:-18px -18px 18px 18px;
    background:radial-gradient(circle at 30% 30%, rgba(233,162,59,.30), transparent 68%);
    border-radius:36px; z-index:-1; filter:blur(6px);
  }

  .sobre-mi p{ color:var(--texto-suave); margin-bottom:1.1rem; }
  .sobre-mi strong{ color:var(--texto); font-weight:600; }

  /* ---------- TARJETAS / HABILIDADES ---------- */
  .grid-habilidades{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:1.3rem;
  }

  .tarjeta{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(201,106,62,.16);
    border-radius:var(--radio);
    padding:1.7rem 1.5rem;
    box-shadow:var(--sombra-suave);
    backdrop-filter: blur(8px);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .tarjeta:hover{
    transform:translateY(-6px);
    box-shadow:var(--sombra);
    border-color:rgba(201,106,62,.38);
  }

  .icono{
    width:48px; height:48px; border-radius:14px;
    display:grid; place-items:center;
    font-size:1.4rem; margin-bottom:1rem;
    background:linear-gradient(140deg, var(--melocoton), #FBE3CD);
    box-shadow:inset 0 0 0 1px rgba(201,106,62,.18);
  }
  .tarjeta h3{ font-size:1.15rem; margin-bottom:.4rem; }
  .tarjeta p{ font-size:.93rem; color:var(--texto-suave); }

  /* ---------- EDUCACIÓN ---------- */
  .timeline{ position:relative; padding-left:2.2rem; }
  .timeline::before{
    content:"";
    position:absolute; left:7px; top:6px; bottom:6px; width:2px;
    background:linear-gradient(180deg, var(--ambar), var(--terracota), transparent);
    border-radius:2px;
  }
  .hito{ position:relative; padding-bottom:2rem; }
  .hito:last-child{ padding-bottom:0; }
  .hito::before{
    content:"";
    position:absolute; left:-2.2rem; top:.45rem;
    width:16px; height:16px; border-radius:50%;
    background:var(--crema);
    border:3px solid var(--terracota);
    box-shadow:0 0 0 4px rgba(201,106,62,.12);
  }
  .hito h3{ font-size:1.1rem; margin-bottom:.15rem; }
  .hito .periodo{
    display:inline-block;
    font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--terracota); margin-bottom:.5rem;
  }
  .hito p{ color:var(--texto-suave); font-size:.95rem; }

  /* ---------- REDES SOCIALES ---------- */
  .redes-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1rem;
  }
  .red{
    display:flex; align-items:center; gap:.9rem;
    text-decoration:none;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(201,106,62,.16);
    border-radius:18px;
    padding:1rem 1.2rem;
    box-shadow:var(--sombra-suave);
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }
  .red:hover{
    transform:translateY(-5px);
    box-shadow:var(--sombra);
    border-color:rgba(201,106,62,.4);
  }
  .red .red-icono{
    flex:0 0 auto;
    width:42px; height:42px; border-radius:12px;
    display:grid; place-items:center;
    background:linear-gradient(140deg, var(--melocoton), #FBE3CD);
    box-shadow:inset 0 0 0 1px rgba(201,106,62,.18);
  }
  .red .red-icono svg{ width:22px; height:22px; }
  .red .red-info{ display:flex; flex-direction:column; line-height:1.2; }
  .red .red-info strong{ font-family:'Fraunces', serif; font-size:1rem; color:var(--texto); font-weight:600; }
  .red .red-info span{ font-size:.82rem; color:var(--texto-suave); }

  /* ---------- CTA FINAL ---------- */
  .cta-final{
    text-align:center;
    padding:clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(4rem, 9vw, 6rem);
    position:relative;
  }
  .cta-final::before{
    content:"";
    position:absolute; inset:auto 10% 1.5rem;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,106,62,.35), transparent);
  }
  .cta-final h2{
    font-size:clamp(1.8rem, 4.6vw, 2.6rem);
    margin-bottom:.8rem;
  }
  .cta-final p{
    max-width:520px; margin:0 auto 2.2rem;
    color:var(--texto-suave);
  }

  .btn-email{
    font-family:inherit; font-size:1.02rem; font-weight:600;
    color:#fff; cursor:pointer;
    border:none; border-radius:999px;
    padding:1.1rem 2.5rem;
    background:linear-gradient(135deg, var(--terracota), var(--ambar));
    box-shadow:0 14px 32px -10px rgba(201,106,62,.8);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
    display:inline-flex; align-items:center; gap:.6rem;
  }
  .btn-email:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 38px -12px rgba(201,106,62,.9);
    filter:brightness(1.04);
  }
  .btn-email:active{ transform:translateY(-1px); }
  .btn-email svg{ width:20px; height:20px; }

  /* ---------- ANIMACIÓN AL SCROLL ---------- */
  .reveal{
    opacity:0;
    transform:translateY(48px);
    transition:opacity .9s cubic-bezier(.22,.68,.32,1),
               transform .9s cubic-bezier(.22,.68,.32,1);
  }
  .reveal.visible{ opacity:1; transform:translateY(0); }

  .reveal-delay-1{ transition-delay:.10s; }
  .reveal-delay-2{ transition-delay:.20s; }
  .reveal-delay-3{ transition-delay:.30s; }
  .reveal-delay-4{ transition-delay:.40s; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .foto-wrap{ transform:none !important; }
  }

  /* ---------- MODAL ---------- */
  .overlay{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    padding:1.25rem;
    background:rgba(59,42,33,.55);
    backdrop-filter:blur(6px);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .overlay.abierto{ opacity:1; visibility:visible; }

  .modal{
    width:min(560px, 100%);
    max-height:92vh; overflow-y:auto;
    background:linear-gradient(180deg, #FFFDFA, var(--crema));
    border-radius:26px;
    border:1px solid rgba(201,106,62,.2);
    box-shadow:0 30px 70px -20px rgba(60,30,10,.55);
    padding:2.2rem 2rem 2rem;
    position:relative;
    transform:translateY(26px) scale(.97);
    transition:transform .35s cubic-bezier(.22,.68,.32,1);
  }
  .overlay.abierto .modal{ transform:translateY(0) scale(1); }

  .cerrar{
    position:absolute; top:14px; right:14px;
    width:38px; height:38px; border-radius:50%;
    border:none; cursor:pointer; font-size:1.35rem; line-height:1;
    color:var(--texto-suave);
    background:rgba(201,106,62,.09);
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .cerrar:hover{ background:rgba(201,106,62,.2); color:var(--terracota); transform:rotate(90deg); }

  .modal h3{ font-size:1.7rem; margin-bottom:.35rem; }
  .modal .intro{ color:var(--texto-suave); font-size:.95rem; margin-bottom:1.7rem; }

  .campo{ margin-bottom:1.15rem; }
  .campo label{
    display:block; font-size:.85rem; font-weight:600;
    margin-bottom:.45rem; color:var(--texto);
  }
  .campo input,
  .campo select,
  .campo textarea{
    width:100%; font-family:inherit; font-size:.95rem; color:var(--texto);
    padding:.8rem 1rem;
    background:#fff;
    border:1.5px solid rgba(201,106,62,.22);
    border-radius:14px;
    transition:border-color .2s ease, box-shadow .2s ease;
    outline:none;
  }
  .campo textarea{ resize:vertical; min-height:88px; }
  .campo input:focus,
  .campo select:focus,
  .campo textarea:focus{
    border-color:var(--terracota);
    box-shadow:0 0 0 4px rgba(201,106,62,.14);
  }

  /* --- Input con prefijo de moneda --- */
  .input-grupo{
    display:flex; align-items:center;
    background:#fff;
    border:1.5px solid rgba(201,106,62,.22);
    border-radius:14px;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    overflow:hidden;
  }
  .input-grupo:focus-within{
    border-color:var(--terracota);
    box-shadow:0 0 0 4px rgba(201,106,62,.14);
  }
  .input-grupo.deshabilitado{ background:#FAF3EC; }

  .input-grupo .prefijo{
    flex:0 0 auto;
    padding:0 .1rem 0 1rem;
    font-weight:700; font-size:.95rem;
    color:var(--terracota);
    letter-spacing:.02em;
    min-width:2.4rem;
  }
  .input-grupo input{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:.8rem .8rem .8rem .3rem !important;
    border-radius:0 !important;
  }
  .input-grupo input:disabled{ color:var(--texto-suave); cursor:not-allowed; }

  .ayuda{
    display:block;
    font-size:.78rem;
    color:var(--texto-suave);
    margin-top:.4rem;
  }

  .segmentado{
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:.45rem;
    background:rgba(201,106,62,.08);
    padding:.35rem; border-radius:16px;
  }
  .segmentado button{
    font-family:inherit; font-size:.86rem; font-weight:600;
    padding:.65rem .4rem; border:none; border-radius:12px;
    background:transparent; color:var(--texto-suave);
    cursor:pointer;
    transition:background .22s ease, color .22s ease, box-shadow .22s ease;
  }
  .segmentado button.activo{
    background:#fff; color:var(--terracota);
    box-shadow:0 4px 12px -4px rgba(201,106,62,.4);
  }

  /* segmentado de 2 botones para remoto/presencial */
  .segmentado.dos{ grid-template-columns:repeat(2, 1fr); }

  .campo-oculto{ display:none; }
  .campo-oculto.mostrar{ display:block; animation:aparecer .3s ease; }
  @keyframes aparecer{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

  .btn-enviar{
    width:100%; font-family:inherit; font-size:1rem; font-weight:600;
    color:#fff; border:none; cursor:pointer;
    padding:1rem; border-radius:16px; margin-top:.6rem;
    background:linear-gradient(135deg, var(--terracota), var(--ambar));
    box-shadow:0 12px 26px -10px rgba(201,106,62,.8);
    transition:transform .22s ease, filter .22s ease;
  }
  .btn-enviar:hover{ transform:translateY(-2px); filter:brightness(1.05); }
  .btn-enviar:disabled{ opacity:.65; cursor:not-allowed; transform:none; filter:none; }

  .aviso{
    margin-top:1rem; font-size:.9rem; text-align:center;
    color:#2E7D5B; font-weight:600;
    display:none;
  }
  .aviso.mostrar{ display:block; animation:aparecer .3s ease; }
  .aviso.error{ color:#B23A2E; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 720px){
    .sobre-mi{ grid-template-columns:1fr; }
    .foto-wrap{ max-width:300px; margin:0 auto; }
    .foto-col::before{ display:none; }
    .modal{ padding:1.8rem 1.3rem 1.5rem; }
    .redes-grid{ grid-template-columns:1fr 1fr; }
    .segmentado{ grid-template-columns:1fr; }
    .segmentado.dos{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 460px){
    .redes-grid{ grid-template-columns:1fr; }
  }