:root{--paper:#f5f2ea;--paper-2:#ebe7dc;--ink:#18362c;--sage:#78917c;--sage-light:#dbe3d9;--clay:#bd755c;--white:#fffdf8;--line:rgba(24,54,44,.16);--serif:"Newsreader",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--shadow:0 24px 60px rgba(24,54,44,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}body.modal-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{color:inherit}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.section{padding:110px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:fixed;top:-60px;left:20px;z-index:200;background:var(--ink);color:white;padding:10px 16px}.skip-link:focus{top:20px}
.site-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}.site-header.is-scrolled{background:rgba(245,242,234,.94);border-color:var(--line);backdrop-filter:blur(12px)}.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand__logo{width:50px;height:50px;object-fit:contain;border-radius:0%}.brand__text{line-height:1.1}.brand__text strong{display:block;font:500 24px/1 var(--serif);letter-spacing:.06em}.brand__text small{font-size:10px;text-transform:uppercase;letter-spacing:.14em}.main-nav{display:flex;align-items:center;gap:32px;font-size:14px}.main-nav>a:not(.button){position:relative}.main-nav>a:not(.button)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--clay);transition:right .25s}.main-nav>a:hover::after{right:0}.menu-button{display:none;border:0;background:transparent;width:40px;padding:8px}.menu-button span:not(.sr-only){display:block;height:1px;background:var(--ink);margin:6px 0;transition:.25s}
.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:100px;background:var(--ink);color:var(--white);padding:15px 25px;font-weight:600;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s}.button:hover{background:#244b3e;transform:translateY(-2px);box-shadow:0 10px 24px rgba(24,54,44,.18)}.button--small{padding:11px 19px;font-size:13px}.eyebrow{margin:0 0 16px;text-transform:uppercase;letter-spacing:.17em;font-size:12px;font-weight:600;color:var(--sage)}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.98;margin:0}h1{font-size:clamp(64px,8.4vw,122px);letter-spacing:-.045em}h2{font-size:clamp(45px,5.2vw,72px);letter-spacing:-.035em}h3{font-size:36px}
.hero{position:relative;min-height:800px;padding:150px 0 80px;overflow:hidden}.hero__shape{position:absolute;width:640px;height:640px;border-radius:50%;background:var(--sage-light);right:-110px;top:60px}.hero__grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:80px;align-items:center}.hero__copy{padding-top:40px}.hero__intro{max-width:590px;font-size:19px;margin:28px 0;color:rgba(24,54,44,.78)}.hero__actions{display:flex;align-items:center;gap:28px}.text-link{font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:3px}.text-link span{display:inline-block;transition:transform .2s}.text-link:hover span{transform:translateX(4px)}.professional{display:flex;align-items:center;gap:12px;margin-top:48px;font-size:13px;letter-spacing:.04em}.professional span{width:36px;height:1px;background:var(--clay)}.hero__portrait{position:relative;margin:0;padding:0 0 60px 50px}.portrait-frame{height:590px;border-radius:220px 220px 24px 24px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center top}.hero__portrait figcaption{position:absolute;left:0;bottom:12px;background:var(--clay);color:var(--white);padding:22px 28px;font:400 26px/1.08 var(--serif);transform:rotate(-2deg)}
.services{background:var(--white)}.section-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end;margin-bottom:65px}.section-heading>p{margin:0;color:rgba(24,54,44,.7);max-width:430px}.service{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:30px;border-top:1px solid var(--line);padding:38px 0}.service:last-child{border-bottom:1px solid var(--line)}.service__number{align-self:start;font:400 16px var(--serif);color:var(--clay)}.service p{max-width:640px;margin:10px 0 0;color:rgba(24,54,44,.7)}.service__link{background:none;border:0;border-bottom:1px solid var(--ink);padding:5px 0;cursor:pointer;font-weight:600}.service__link span{display:inline-block;margin-left:8px;transition:transform .25s}.service__link:hover span{transform:translate(3px,-3px)}
.about{overflow:hidden}.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:105px;align-items:center}.about__photos{position:relative;padding:0 70px 100px 0}.about__main{width:100%;height:600px;border-radius:220px 220px 12px 12px;object-fit:cover}.about__detail{position:absolute;width:230px;height:265px;right:0;bottom:0;object-fit:cover;border:10px solid var(--paper);box-shadow:var(--shadow)}.about__copy>p:not(.eyebrow){font-size:17px;color:rgba(24,54,44,.76);margin:26px 0}.values{list-style:none;padding:24px 0 0;margin:30px 0 0;border-top:1px solid var(--line);display:grid;gap:15px}.values li{display:flex;align-items:center;gap:13px;font-weight:500}.values i{width:20px;color:var(--clay)}
.request{background:var(--ink);color:var(--white)}.request .eyebrow{color:#adc2ae}.request__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.request__intro>p:not(.eyebrow){color:rgba(255,253,248,.7);max-width:430px}.privacy-note{margin-top:40px;display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid rgba(255,255,255,.15);border-radius:12px;font-size:13px;color:rgba(255,253,248,.75)}.privacy-note i{margin-top:4px;color:#adc2ae}.contact-form{background:var(--white);color:var(--ink);padding:42px;border-radius:20px;box-shadow:var(--shadow)}.contact-form label{display:grid;gap:7px;font-size:12px;font-weight:600;margin-bottom:19px;letter-spacing:.04em}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:0;border-bottom:1px solid #b8bdb7;background:transparent;padding:10px 2px 12px;outline:0;border-radius:0}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--clay)}.check{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:10px!important;font-weight:400!important;line-height:1.4}.check input{width:16px;margin-top:2px}.form-status{min-height:20px;font-size:13px;margin:12px 0 0;color:var(--sage)}
.contact{text-align:center;background:var(--paper-2)}.contact h2{margin-bottom:60px}.contact__links{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}.contact__links>*{padding:25px 15px;border-right:1px solid var(--line);font-weight:600}.contact__links>*:last-child{border:0}.contact__links a{transition:background .2s}.contact__links a:hover{background:rgba(255,255,255,.45)}.contact__links small{display:block;color:var(--sage);font-weight:500;margin-bottom:4px}.site-footer{background:#10251e;color:var(--white);padding:34px 0}.footer__inner{display:flex;justify-content:space-between;align-items:center}.brand--light .brand__logo{background:var(--white)}.footer__inner p{font-size:12px;color:rgba(255,255,255,.55)}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px}.modal__backdrop{position:absolute;inset:0;background:rgba(8,20,16,.72);backdrop-filter:blur(5px)}.modal__card{position:relative;width:min(480px,100%);background:var(--white);padding:48px;border-radius:20px;text-align:center;box-shadow:var(--shadow)}.modal__card h2{font-size:48px}.modal__card p:not(.eyebrow){color:rgba(24,54,44,.72);margin:22px 0}.modal__close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:30px;cursor:pointer}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal--delay{transition-delay:.15s}.reveal.is-visible{opacity:1;transform:none}
@media (max-width:900px){.section{padding:82px 0}.main-nav{position:fixed;inset:88px 0 auto;background:var(--paper);padding:25px 20px 35px;display:none;flex-direction:column;border-bottom:1px solid var(--line)}.main-nav.is-open{display:flex}.menu-button{display:block}.hero{padding-top:130px}.hero__grid,.about__grid,.request__grid{grid-template-columns:1fr;gap:55px}.hero__copy{padding:0}.hero__portrait{width:min(560px,100%);margin:auto}.section-heading{grid-template-columns:1fr;gap:24px}.about__photos{width:min(600px,100%);margin:auto}.request__intro h2{max-width:700px}.contact__links{grid-template-columns:1fr 1fr}.contact__links>*:nth-child(2){border-right:0}.contact__links>*:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:600px){.container{width:min(100% - 28px,1180px)}.brand__text small{display:none}.hero{min-height:auto;padding-bottom:65px}.hero__grid{gap:45px}.hero__intro{font-size:17px}.hero__actions{align-items:flex-start;flex-direction:column;gap:19px}.professional{align-items:flex-start;margin-top:35px}.portrait-frame{height:470px}.hero__portrait{padding-left:24px}.hero__portrait figcaption{font-size:21px;padding:18px 20px}.section-heading{margin-bottom:45px}.service{grid-template-columns:42px 1fr;padding:28px 0}.service__link{grid-column:2;justify-self:start}.about__grid{gap:45px}.about__photos{padding:0 38px 65px 0}.about__main{height:460px}.about__detail{width:155px;height:180px;border-width:7px}.request__grid{gap:38px}.contact-form{padding:27px 20px}.field-row{grid-template-columns:1fr;gap:0}.contact__links{grid-template-columns:1fr}.contact__links>*{border-right:0;border-bottom:1px solid var(--line)!important}.contact__links>*:last-child{border-bottom:0!important}.footer__inner{flex-direction:column;gap:18px;text-align:center}.modal__card{padding:42px 24px}.modal__card h2{font-size:40px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button,.text-link span,.service__link span{transition:none}}

.site-footer .brand img,
.site-footer .brand__logo {
  display: block;
  width: auto !important;
  max-width: 90px !important;
  height: 72px !important;
  object-fit: contain;
}

.about__main {
  object-position: center 15%;
}

/* Formulario conectado con Google Apps Script */

.contact-form .button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.form-status.is-error {
  color: #a33d30;
}

.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.submission-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

_______----------____________-------------_____________------------___________-------------____________-------

/* =========================================================
   VERSIÓN RESPONSIVE PARA TABLETS Y CELULARES
   Colocar al final de styles.css
========================================================= */

/* Evita movimientos horizontales accidentales */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- TABLETS Y CELULARES ---------- */

@media (max-width: 900px) {
  html {
    scroll-padding-top: 78px;
  }

  body {
    font-size: 16px;
  }

  .container {
    width: min(100% - 36px, 720px);
  }

  .section {
    padding: 78px 0;
  }

  /* Header */

  .nav-wrap {
    height: 78px;
  }

  .brand__logo {
    height: 64px;
  }

  .menu-button {
    display: block;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    cursor: pointer;
  }

  .main-nav {
    position: fixed;
    top: 78px;
    right: 0;
    left: 0;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    max-height: calc(100vh - 78px);
    padding: 18px;
    overflow-y: auto;

    background: rgba(245, 242, 234, 0.98);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 35px rgba(24, 54, 44, 0.12);
    backdrop-filter: blur(15px);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > a {
    width: 100%;
    padding: 14px 8px;
    text-align: center;
  }

  .main-nav > a:not(.button) {
    border-bottom: 1px solid var(--line);
  }

  .main-nav .button {
    margin-top: 14px;
  }

  /* Portada */

  .hero {
    min-height: auto;
    padding: 125px 0 75px;
  }

  .hero__shape {
    top: 150px;
    right: -180px;
    width: 440px;
    height: 440px;
    opacity: 0.7;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .hero__copy {
    padding-top: 0;
  }

  .hero__copy h1 {
    max-width: 720px;
  }

  .hero__intro {
    max-width: 650px;
  }

  .hero__portrait {
    width: min(540px, 100%);
    margin-inline: auto;
  }

  /* Encabezados de secciones */

  .section-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .section-heading > p {
    max-width: 600px;
  }

  /* Sobre mí */

  .about__grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .about__photos {
    width: min(540px, 100%);
    margin-inline: auto;
  }

  /* Formulario */

  .request__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .request__intro {
    max-width: 680px;
  }

  .contact-form {
    width: min(100%, 680px);
  }

  /* Contacto */

  .contact__links {
    grid-template-columns: 1fr 1fr;
  }
}


/* ---------- CELULARES ---------- */

@media (max-width: 600px) {
  html {
    scroll-padding-top: 72px;
  }

  body {
    font-size: 15px;
    line-height: 1.6;
  }

  .container {
    width: calc(100% - 28px);
  }

  .section {
    padding: 62px 0;
  }

  /* Tipografía */

  h1 {
    font-size: clamp(50px, 16vw, 68px);
    line-height: 0.96;
    letter-spacing: -0.04em;
  }

  h2 {
    font-size: clamp(39px, 12vw, 52px);
    line-height: 1;
    letter-spacing: -0.035em;
  }

  h3 {
    font-size: 30px;
    line-height: 1.05;
  }

  .eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 1.4;
  }

  /* Header móvil */

  .nav-wrap {
    height: 72px;
  }

  .brand {
    min-width: 0;
  }

  .brand__logo {
    width: auto;
    height: 58px;
    flex-shrink: 0;
  }

  .brand__text {
    min-width: 0;
  }

  .brand__text strong {
    display: block;
    font-size: 21px;
    line-height: 1;
  }

  .brand__text small {
    display: none;
  }

  .main-nav {
    top: 72px;
    max-height: calc(100vh - 72px);
  }

  /* Portada */

  .hero {
    padding: 110px 0 60px;
  }

  .hero__shape {
    top: 270px;
    right: -170px;
    width: 360px;
    height: 360px;
  }

  .hero__grid {
    gap: 42px;
  }

  .hero__intro {
    margin: 22px 0;
    font-size: 17px;
    line-height: 1.65;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 16px;
  }

  .hero__actions .button,
  .hero__actions .text-link {
    width: 100%;
  }

  .hero__actions .text-link {
    padding: 12px 2px;
    text-align: center;
  }

  .professional {
    align-items: flex-start;
    margin-top: 32px;
    font-size: 12px;
    line-height: 1.5;
  }

  .professional span {
    flex: 0 0 28px;
    margin-top: 9px;
  }

  /* Foto principal */

  .hero__portrait {
    width: 100%;
    padding: 0 0 50px 18px;
  }

  .portrait-frame {
    width: 100%;
    height: min(118vw, 480px);
    border-radius: 160px 160px 20px 20px;
  }

  .portrait-frame img {
    object-position: center top;
  }

  .hero__portrait figcaption {
    right: 12px;
    bottom: 8px;
    padding: 16px 18px;
    font-size: 20px;
  }

  /* Servicios */

  .section-heading {
    gap: 18px;
    margin-bottom: 38px;
  }

  .service {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
    padding: 28px 0;
  }

  .service__number {
    padding-top: 5px;
    font-size: 14px;
  }

  .service h3 {
    overflow-wrap: break-word;
  }

  .service p {
    margin-top: 12px;
    font-size: 15px;
  }

  .service__link {
    grid-column: 2;
    justify-self: start;
    min-height: 44px;
    margin-top: 4px;
  }

  /* Sobre mí */

  .about__grid {
    gap: 42px;
  }

  .about__photos {
    width: 100%;
    padding: 0;
  }

  .about__main {
    width: 100%;
    height: min(125vw, 500px);
    border-radius: 160px 160px 14px 14px;
    object-position: center 12%;
  }

  .about__copy > p:not(.eyebrow) {
    margin: 20px 0;
    font-size: 16px;
  }

  .values {
    margin-top: 25px;
    padding-top: 22px;
  }

  /* Formulario */

  .request__grid {
    gap: 38px;
  }

  .request__intro h2 {
    max-width: 100%;
  }

  .request__intro > p:not(.eyebrow) {
    font-size: 15px;
  }

  .privacy-note {
    margin-top: 28px;
    padding: 16px;
    font-size: 12px;
  }

  .contact-form {
    width: 100%;
    padding: 28px 20px;
    border-radius: 16px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form label {
    margin-bottom: 20px;
    font-size: 12px;
  }

  /*
   * Mantener 16px evita que Safari haga zoom
   * automáticamente al seleccionar un campo.
   */

  .contact-form input,
  .contact-form select {
    min-height: 48px;
    padding: 11px 2px;
    font-size: 16px;
  }

  .check {
    gap: 12px !important;
  }

  .check input {
    flex: 0 0 18px;
    width: 18px;
    min-height: 18px;
    margin-top: 1px;
  }

  .check span {
    font-size: 13px;
    line-height: 1.5;
  }

  .contact-form > .button {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
  }

  .form-status {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
  }

  /* Contacto */

  .contact {
    text-align: left;
  }

  .contact h2 {
    margin-bottom: 38px;
  }

  .contact__links {
    grid-template-columns: 1fr;
  }

  .contact__links > * {
    min-width: 0;
    padding: 20px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line) !important;
    overflow-wrap: anywhere;
  }

  .contact__links > *:last-child {
    border-bottom: 0 !important;
  }

  /* Footer */

  .site-footer {
    padding: 25px 0 max(25px, env(safe-area-inset-bottom));
  }

  .footer__inner {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: auto;
    text-align: center;
  }

  .site-footer .brand {
    display: flex;
    justify-content: center;
    width: auto;
    max-width: none;
  }

  .site-footer .brand__logo,
  .site-footer .brand img {
    width: auto !important;
    height: 76px !important;
    max-width: 74px !important;
  }

  /* En el footer se muestra solamente el logo blanco */

  .site-footer .brand__text {
    display: none;
  }

  .footer__inner p {
    max-width: 280px;
    font-size: 11px;
    line-height: 1.5;
  }

  /* Modal */

  .modal {
    padding: 16px;
  }

  .modal__card {
    width: 100%;
    max-height: calc(100vh - 32px);
    padding: 40px 22px 25px;
    overflow-y: auto;
    border-radius: 18px;
  }

  .modal__card h2 {
    font-size: 38px;
    line-height: 1;
  }

  .modal__card p:not(.eyebrow) {
    margin: 20px 0;
    font-size: 14px;
  }

  .modal__card > .button {
    width: 100%;
    min-height: 48px;
  }

  .modal__close {
    top: 5px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}


/* ---------- CELULARES PEQUEÑOS ---------- */

@media (max-width: 380px) {
  .container {
    width: calc(100% - 22px);
  }

  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 38px;
  }

  .brand__logo {
    height: 52px;
  }

  .portrait-frame {
    height: 390px;
  }

  .hero__portrait figcaption {
    right: 6px;
    padding: 14px 15px;
    font-size: 18px;
  }

  .contact-form {
    padding: 24px 16px;
  }

  .modal__card h2 {
    font-size: 34px;
  }
}

/* Ocultar la foto principal solamente en celulares */
@media (max-width: 600px) {
  .hero__portrait {
    display: none;
  }

  .hero__grid {
    display: block;
  }

  .hero {
    padding-bottom: 55px;
  }
}

/* Campo de descripción del motivo */

.contact-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid #b8bdb7;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.contact-form textarea:focus {
  border-color: var(--clay);
}

.field-help {
  display: block;
  margin-top: 2px;
  color: rgba(24, 54, 44, 0.62);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

@media (max-width: 600px) {
  .contact-form textarea {
    min-height: 130px;
    font-size: 16px;
  }
}