/* =========================================================
   Kinea — Terapia ocupacional a domicilio
   Medidas tomadas de los mockups (referencia: 1440px)
   ========================================================= */

:root{
  --papel:        #f7f4ef;
  --papel-calido: #faf7f2;
  --crema:        #efe9e1;

  --titular:      #132c27;
  --verde-osc:    #243d37;
  --verde:        #1c6b52;
  --verde-ital:   #3f625a;
  --verde-suave:  #46695f;
  --teal:         #2e8780;
  --terra:        #b9714b;

  --texto:        #4a4d49;
  --texto-suave:  #6f736c;
  --stats:        #4e5a4a;

  --linea:        #ded7cc;
  --pill:         #e7e6df;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --body:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1212px;
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }

body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--body);
  font-size:15.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.center{ text-align:center; }

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--nav-h);
  display:flex; align-items:center; gap:32px;
  padding:0 72px;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.is-stuck{
  background:rgba(247,244,239,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  box-shadow:0 1px 0 rgba(19,44,39,.07);
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark{ width:44px; height:44px; border-radius:50%; }
.brand__name{
  font-family:var(--serif); font-weight:700; font-size:26px;
  letter-spacing:-.01em; color:var(--titular);
}

.nav__links{ display:flex; align-items:center; gap:34px; margin-left:clamp(20px,11vw,150px); }
.nav__item{ position:relative; }
.nav__link{
  display:flex; align-items:center; gap:7px;
  background:none; border:0; padding:8px 0; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:400;
  color:#20241f; text-decoration:none; white-space:nowrap;
}
.nav__link:hover{ color:var(--verde); }
.caret{ width:15px; height:15px; stroke-width:2; transition:transform .25s ease; }
.nav__item.is-open .caret{ transform:rotate(180deg); }

.dropdown{
  position:absolute; top:calc(100% + 10px); left:-16px; min-width:214px;
  background:#fffdf9; border:1px solid var(--linea); border-radius:14px;
  padding:8px; box-shadow:0 18px 40px -18px rgba(19,44,39,.28);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav__item.is-open .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{
  display:block; padding:9px 14px; border-radius:9px;
  font-family:var(--sans); font-size:14.5px; color:#2b322c; text-decoration:none;
}
.dropdown a:hover{ background:var(--crema); color:var(--verde); }

.nav__sep{ width:1px; height:20px; background:rgba(19,44,39,.3); flex:0 0 auto; margin:0 -8px; }

.nav__cta{ margin-left:auto; }

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:0; cursor:pointer; padding:10px;
}
.burger span{
  display:block; height:1.8px; background:var(--titular); border-radius:2px;
  margin:5px 0; transition:transform .3s ease, opacity .2s ease;
}
.burger.is-open span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:14.5px; font-weight:500; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; border:0; white-space:nowrap;
  border-radius:999px; padding:0 26px; height:42px;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--teal{ background:var(--teal); color:#fff; height:40px; padding:0 24px;
  box-shadow:0 10px 22px -12px rgba(46,135,128,.75); }
.btn--teal:hover{ background:#27766f; }

.btn--dark{ background:var(--verde-osc); color:#f4f1ea; padding:0 28px;
  box-shadow:0 12px 26px -16px rgba(36,61,55,.85); }
.btn--dark:hover{ background:#1b2e2a; }
.btn__arrow{ width:17px; height:17px; }

.btn--ghost{ background:transparent; color:#2c3a35; border:1.4px solid #cfc9c0; }
.btn--ghost:hover{ border-color:var(--verde); color:var(--verde); }

.btn--green{ background:var(--verde); color:#fff;
  box-shadow:0 12px 26px -14px rgba(28,107,82,.8); }
.btn--green:hover{ background:#175a45; }

.btn--outline{ background:#fff; color:#3a423b; border:1.4px solid var(--linea); }
.btn--outline:hover{ border-color:#b9b1a4; }

.btn--lg{ height:54px; padding:0 34px; font-size:16px; border-radius:999px; }
.btn__send{ width:18px; height:18px; }

/* ============ HERO ============ */
.hero{
  /* La foto trae la transicion hacia Servicios integrada en su borde inferior.
     Por eso se ancla abajo y el alto sigue su proporcion (1.601), para no
     recortarla. El color de fondo es el mismo tono en que termina la foto,
     asi el empalme con la seccion siguiente es invisible. */
  position:relative;
  min-height:calc(100vw / 1.601);
  display:flex; align-items:center;
  background:#faf5ee url("../img/hero.jpg") center bottom / cover no-repeat;
  padding:var(--nav-h) 0 12.5vw;
  overflow:hidden;
}
.hero::before{           /* aclara la zona del texto, como en el mockup */
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(250,245,238,.92) 0%, rgba(250,245,238,.78) 32%,
    rgba(250,245,238,.28) 52%, rgba(250,245,238,0) 68%);
}
.hero__inner{ position:relative; width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  height:42px; padding:0 20px; border-radius:999px;
  background:rgba(231,230,223,.86); border:1px solid rgba(19,44,39,.07);
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:#2c3a30;
}
.pill__icon{ width:15px; height:15px; stroke-width:1.7; }

.hero__title{
  margin:35px 0 0;
  font-family:var(--serif); font-weight:600; font-size:50px; line-height:1.08;
  letter-spacing:-.015em; color:var(--titular);
}
.hero__title em{ font-style:italic; font-weight:500; color:var(--verde-ital); }

.hero__kicker{
  margin:28px 0 0;
  font-family:var(--body); font-size:24px; font-weight:300; color:var(--verde-suave);
}

.hero__lead{ margin:14px 0 0; max-width:640px; color:var(--texto); }

.hero__cta{ display:flex; gap:14px; margin-top:38px; }

.hero__stats{
  display:flex; gap:52px; align-items:center;
  list-style:none; margin:52px 0 0; padding:0;
}
.hero__stats li{
  display:flex; align-items:center; gap:11px;
  font-family:var(--body); font-size:14.5px; color:var(--stats);
}
.ico{ width:19px; height:19px; stroke-width:1.5; color:#55604f; }
.ico--star{ color:#e8b93f; fill:#f2c94c; stroke:#e0ab2c; stroke-width:1.2; }

/* ============ TÍTULOS DE SECCIÓN ============ */
.eyebrow{
  margin:0; font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
}
.eyebrow--green{ color:var(--verde); }
.eyebrow--terra{ color:var(--terra); }

.sec-title{
  margin:18px 0 0;
  font-family:var(--serif); font-weight:600; font-size:44px; line-height:1.14;
  letter-spacing:-.015em; color:var(--titular);
}
.sec-title em{ font-style:italic; font-weight:500; color:var(--verde); }

.rule{ display:block; width:44px; height:1.6px; background:#c9c2b6; margin:26px 0; }

.sec-lead{ margin:22px 0 0; max-width:560px; color:var(--texto-suave); font-size:16.5px; }
.sec-lead--tight{ margin-top:14px; }
.center .sec-lead, .sec-lead.center{ margin-left:auto; margin-right:auto; }

.swash{ position:relative; white-space:nowrap; }
.swash::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7C46 2 152 2 198 6' stroke='%238fae9c' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* ============ SERVICIOS ============ */
.servicios{
  position:relative; overflow:hidden;
  padding:104px 0 92px;
  background:linear-gradient(180deg,#faf5ee 0%,#f7f0e9 46%,#f4ebe6 100%);
}
.servicios__watermark{
  position:absolute; top:150px; right:6%; width:190px; opacity:.07;
  pointer-events:none; filter:grayscale(1);
}

.cards{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:14px; align-items:start; margin:56px -43px 0;   /* fila más ancha que el texto, como el mockup */
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#fdfbf8 0%,#f8f4ef 100%);
  border:1px solid rgba(19,44,39,.07); border-radius:18px;
  overflow:hidden; min-height:360px;
  box-shadow:0 10px 26px -22px rgba(19,44,39,.4);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -26px rgba(19,44,39,.45); }

.card--featured{
  margin-top:-18px; min-height:392px;
  border-color:rgba(19,44,39,.1);
  box-shadow:0 22px 46px -24px rgba(19,44,39,.42);
}

.tag{
  position:absolute; top:14px; right:14px; z-index:2;
  background:#dceadd; color:#1f5c40; border-radius:999px;
  padding:4px 11px; font-family:var(--sans); font-size:11px; font-weight:500;
}

.card__ico{
  display:grid; place-items:center; width:40px; height:40px; margin:21px 0 0 20px;
  border-radius:50%; background:#eef1e9; color:#33544a;
}
.card__ico svg{ width:20px; height:20px; }

.card__title{
  margin:20px 20px 0;
  font-family:var(--sans); font-size:17px; font-weight:500; color:#1c2b25;
}
.card--featured .card__title{ font-size:19px; }

.card__text{
  margin:10px 20px 0; font-size:12.5px; line-height:1.62; color:var(--texto-suave);
}

.more{
  display:inline-flex; align-items:center; gap:6px; margin:16px 20px 20px;
  font-family:var(--sans); font-size:12.5px; color:var(--verde); text-decoration:none;
}
.more svg{ width:14px; height:14px; transition:transform .25s ease; }
.more:hover svg{ transform:translateX(4px); }

.card__photo{ margin-top:auto; height:164px; overflow:hidden; }
.card--featured .card__photo{ height:182px; }
.card__photo img{ width:100%; height:100%; object-fit:cover; }

.servicios__note{
  display:flex; align-items:center; justify-content:center; gap:13px;
  margin:52px 0 0; font-family:var(--sans); font-size:16px; color:#4d554c;
}
.servicios__note strong{ color:var(--verde); font-weight:600; }
.note__ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:#fff; color:var(--verde); box-shadow:0 6px 16px -10px rgba(19,44,39,.5);
}
.note__ico svg{ width:20px; height:20px; }

/* ============ CÓMO TRABAJAMOS ============ */
.proceso{ padding:104px 0 104px; background:var(--papel-calido); }
.proceso__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
}

.steps{ list-style:none; margin:46px 0 0; padding:0; }
.step{ display:flex; align-items:center; gap:0; margin-bottom:26px; }
.step:last-child{ margin-bottom:0; }

.step__num{
  flex:0 0 auto; display:grid; place-items:center; width:68px; height:68px;
  border-radius:50%; border:1.4px solid #cfdccd; background:#f4f7f1;
  font-family:var(--serif); font-size:27px; font-weight:500; color:#3d6b57;
}
.step__link{ flex:0 0 auto; width:132px; height:30px; color:#a8c3b0; stroke-width:1.6; margin:0 20px 0 6px; }

.step__body h3{
  margin:0; font-family:var(--sans); font-size:18px; font-weight:500; color:#1c2b25;
}
.step__body p{ margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--texto-suave); }

.proceso__media{ position:relative; }
.proceso__photo{
  width:100%; border-radius:26px; box-shadow:0 30px 60px -34px rgba(19,44,39,.5);
}
.floatcard{
  position:absolute; left:-42px; bottom:44px;
  background:#fbf8f3; border-radius:20px; padding:24px 30px 18px;
  box-shadow:0 26px 50px -26px rgba(19,44,39,.45);
}
.checks{ list-style:none; margin:0; padding:0; }
.checks li{
  display:flex; align-items:center; gap:12px; padding:9px 0;
  font-family:var(--sans); font-size:15px; color:#2b352e;
}
.checks svg{ width:21px; height:21px; color:var(--verde); stroke-width:1.5; }
.floatcard__leaf{ width:74px; height:26px; margin:6px auto 0; display:block; color:#b6c9b4; stroke-width:1.3; }

/* ============ RESERVA / CALENDARIO ============ */
.reserva{
  position:relative; padding:104px 0 96px;
  background:url("../img/bg-reserva.jpg") center/cover no-repeat;
}
.reserva::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(250,247,242,.62) 0%,rgba(250,247,242,.46) 40%,rgba(250,247,242,.66) 100%);
}
.reserva .wrap{ position:relative; }

.bookcard{
  margin:52px auto 0; max-width:1010px;
  background:rgba(255,253,250,.97); border-radius:26px;
  padding:34px 40px 36px;
  box-shadow:0 40px 80px -44px rgba(19,44,39,.5);
}
.bookcard__head{ display:flex; align-items:flex-start; gap:18px; }
.bookcard__ico{
  flex:0 0 auto; display:grid; place-items:center; width:54px; height:54px;
  border-radius:50%; background:#e7efe6; color:#2f5c4b;
}
.bookcard__ico svg{ width:26px; height:26px; }
.bookcard__head h3{
  margin:2px 0 0; font-family:var(--serif); font-size:29px; font-weight:600; color:var(--titular);
}
.bookcard__head p{ margin:5px 0 0; font-size:14.5px; color:var(--texto-suave); }

.bookcard__body{
  display:grid; grid-template-columns:1.28fr 1fr; gap:48px; margin-top:30px;
}

.cal__nav{ display:flex; align-items:center; justify-content:space-between; padding:0 6px 4px; }
.cal__month{ font-family:var(--sans); font-size:19px; font-weight:500; color:#22302a; }
.cal__arrow{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:none; border:0; cursor:pointer; color:#5c6a5f;
}
.cal__arrow:hover{ background:var(--crema); }
.cal__arrow svg{ width:19px; height:19px; }

.cal__dow, .cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal__dow{ margin-top:12px; }
.cal__dow span{
  text-align:center; font-family:var(--sans); font-size:13px; color:#8b9086; padding:8px 0;
}
.cal__grid{ gap:2px; margin-top:2px; }
.cal__cell{
  display:grid; place-items:center; height:40px; border-radius:50%;
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:15px; color:#2b332c;
  transition:background .18s ease, color .18s ease;
}
.cal__cell:hover:not(:disabled){ background:#e6ede4; }
.cal__cell.is-out{ color:#c2c4bc; cursor:default; }
.cal__cell:disabled{ color:#c2c4bc; cursor:default; }
.cal__cell.is-today{ background:#e2ebe0; color:#1f4f3c; font-weight:500; }
.cal__cell.is-sel{ background:var(--verde); color:#fff; font-weight:500; }

.bookform{ display:flex; flex-direction:column; }
.field{ display:block; }
.field + .field{ margin-top:16px; }
.field__label{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-family:var(--sans); font-size:14.5px; color:#2b332c;
}
.field__ico{ width:17px; height:17px; color:var(--verde); stroke-width:1.6; }
.opt{ color:#9a9d95; }

.select{ position:relative; }
.select svg{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:#7a7f76; pointer-events:none;
}
select, input, textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:#2b332c;
  background:#fdfcf9; border:1.3px solid var(--linea); border-radius:11px;
  padding:0 15px; height:48px; appearance:none; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{ height:auto; padding:13px 15px; line-height:1.55; resize:vertical; }
input::placeholder, textarea::placeholder{ color:#a8aca3; }
select:focus, input:focus, textarea:focus{
  border-color:var(--verde); box-shadow:0 0 0 3px rgba(28,107,82,.12);
}
select:invalid{ color:#a8aca3; }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:22px; font-family:var(--sans); font-size:14.5px; color:#2b332c;
}
.toggle{
  flex:0 0 auto; width:52px; height:29px; border-radius:999px; border:0;
  background:#cfd3ca; cursor:pointer; padding:3px; transition:background .25s ease;
}
.toggle span{
  display:block; width:23px; height:23px; border-radius:50%; background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .25s ease;
}
.toggle.is-on{ background:var(--verde); }
.toggle.is-on span{ transform:translateX(23px); }

.hint{ margin:18px 0 0; font-family:var(--sans); font-size:13.5px; color:#8b9086; }

.bookform__actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:auto; padding-top:26px; }
.bookform__actions .btn{ height:44px; border-radius:10px; padding:0 26px; }

.reserva__facts{
  display:flex; justify-content:center; gap:74px;
  list-style:none; margin:44px 0 0; padding:0;
}
.reserva__facts li{ display:flex; align-items:center; gap:13px; }
.reserva__facts span:last-child{
  font-family:var(--sans); font-size:14px; line-height:1.45; color:#5b6259;
}
.reserva__facts strong{ font-weight:500; color:#22302a; }
.fact__ico{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:#e7efe6; color:#2f5c4b;
}
.fact__ico svg{ width:21px; height:21px; }

/* ============ CONTACTO ============ */
.contacto{
  position:relative; overflow:hidden; padding:96px 0 104px;
  background:url("../img/bg-contacto.jpg") center/cover no-repeat;
}
.contacto::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(250,247,242,.5) 0%,rgba(250,247,242,.36) 50%,rgba(250,247,242,.58) 100%);
}
.contacto .wrap{ position:relative; }
.contacto__watermark{
  position:absolute; top:22%; right:7%; width:170px; opacity:.09;
  pointer-events:none; filter:grayscale(1); z-index:1;
}

.divider{ display:flex; align-items:center; gap:22px; max-width:950px; margin:0 auto 26px; }
.divider__line{ flex:1; height:1px; background:#d8d0c4; }
.divider__text{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:16px; color:var(--verde);
}
.divider__text svg{ width:18px; height:18px; }

.formcard{
  position:relative; z-index:2; max-width:950px; margin:0 auto;
  background:rgba(255,253,250,.97); border-radius:24px; padding:38px 44px 34px;
  box-shadow:0 40px 80px -44px rgba(19,44,39,.5);
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px; }
.grid2 .field + .field{ margin-top:0; }
.formcard > .field + .field, .formcard > .grid2 + .field{ margin-top:16px; }
.field--half{ max-width:calc(50% - 12px); }
.formcard .btn--lg{ margin-top:26px; }

.formcard__note{
  display:flex; align-items:center; gap:9px;
  margin:16px 0 0; font-family:var(--sans); font-size:13px; color:#8b9086;
}
.formcard__note svg{ width:15px; height:15px; }

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .nav{ padding:0 40px; }
  .nav__links{ gap:30px; }
  .cards{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .card--featured{ margin-top:0; }
  .servicios__watermark{ display:none; }
}

@media (max-width:960px){
  :root{ --nav-h:68px; }
  .nav{ padding:0 22px; gap:0; }
  .burger{ display:block; }
  .nav__cta{ display:none; }

  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fbf8f3; padding:10px 22px 24px; margin:0;
    box-shadow:0 24px 40px -26px rgba(19,44,39,.4);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__item{ border-bottom:1px solid rgba(19,44,39,.08); }
  .nav__link{ width:100%; justify-content:space-between; padding:15px 0; font-size:16.5px; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; background:none; padding:0 0 10px;
    display:none;
  }
  .nav__item.is-open .dropdown{ display:block; }

  .hero{ min-height:0; padding:calc(var(--nav-h) + 54px) 0 22vw;
    background-position:66% bottom; }
  .hero::before{ background:linear-gradient(175deg,rgba(250,245,238,.9) 0%,rgba(250,245,238,.74) 58%,rgba(250,245,238,.38) 100%); }
  .hero__title{ font-size:38px; }
  .hero__title br{ display:none; }
  .hero__kicker{ font-size:20px; }
  .hero__lead br{ display:none; }
  .hero__stats{ flex-direction:column; align-items:flex-start; gap:14px; margin-top:36px; }

  .sec-title{ font-size:36px; }
  .servicios, .proceso, .reserva, .contacto{ padding:72px 0; }
  .cards{ grid-template-columns:repeat(2,1fr); }

  .proceso__grid{ grid-template-columns:1fr; gap:48px; }
  .floatcard{ left:16px; bottom:16px; padding:18px 22px 12px; }
  .step__link{ display:none; }
  .step{ gap:18px; }
  .step__num{ width:64px; height:64px; font-size:25px; }

  .bookcard{ padding:26px 22px 28px; }
  .bookcard__body{ grid-template-columns:1fr; gap:30px; }
  .bookform__actions{ padding-top:16px; }
  .reserva__facts{ flex-direction:column; align-items:flex-start; gap:20px; }

  .formcard{ padding:28px 22px 26px; }
  .grid2{ grid-template-columns:1fr; gap:16px; }
  .grid2 .field + .field{ margin-top:16px; }
  .field--half{ max-width:none; }
  .contacto__watermark{ display:none; }
}

@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .card{ min-height:0; }
  .card__photo{ max-height:230px; }
  .hero__title{ font-size:32px; }
  .sec-title{ font-size:30px; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .divider__line{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =========================================================
   TRABAJA CON NOSOTROS
   ========================================================= */
.nav__link.is-active{ color:var(--verde); font-weight:500; }

.rule--green{ width:34px; height:2px; background:#4f8f6d; margin:22px 0; }

/* ---------- Hero de la página ---------- */
.tjhero{
  position:relative; min-height:790px;
  display:flex; align-items:center;
  background:url("../img/bg-trabaja.jpg") 62% center / cover no-repeat;
  padding:var(--nav-h) 0 40px;
  overflow:hidden;
}
.tjhero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(250,247,242,.96) 0%, rgba(250,247,242,.93) 40%,
    rgba(250,247,242,.74) 52%, rgba(250,247,242,.2) 64%,
    rgba(250,247,242,0) 75%);
}
.tjhero__inner{ position:relative; width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.tjhero__title{
  margin:16px 0 0;
  font-family:var(--serif); font-weight:600; font-size:47px; line-height:1.14;
  letter-spacing:-.015em; color:var(--titular);
}
.tjhero__title em{ font-style:italic; font-weight:500; color:var(--verde); }

.tjhero__lead{ margin:0; max-width:560px; font-size:15px; color:var(--texto); }

.perks{
  display:grid; grid-template-columns:repeat(4,minmax(0,163px));
  gap:16px; list-style:none; margin:52px 0 0; padding:0;
}
.perk__ico{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; background:#eaefe7; color:#33544a;
}
.perk__ico svg{ width:21px; height:21px; }
.perk h3{
  margin:18px 0 0;
  font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.32; color:#1c2b25;
}
.perk p{ margin:9px 0 0; font-size:12.5px; line-height:1.6; color:var(--texto-suave); }
.perk__rule{ display:block; width:26px; height:2px; background:#4f8f6d; margin-top:14px; }

/* ---------- Sección de postulación ---------- */
.postula{ padding:96px 0 104px; background:var(--papel-calido); }
.postula__grid{
  display:grid; grid-template-columns:minmax(0,398px) minmax(0,1fr);
  gap:64px; align-items:start;
}
.postula__col .sec-title{ margin-top:0; font-size:38px; }
.postula__p{ margin:20px 0 0; font-size:14.5px; line-height:1.7; color:var(--texto-suave); }

.postula__sub{
  margin:0 0 26px;
  font-family:var(--serif); font-size:23px; font-weight:600; color:var(--titular);
}

.benefits{ list-style:none; margin:0; padding:0; }
.benefits li{ display:flex; align-items:flex-start; gap:16px; margin-bottom:26px; }
.benefits li:last-child{ margin-bottom:0; }
.benefit__ico{
  flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px;
  border-radius:50%; background:#eaefe7; color:#2f5c4b;
}
.benefit__ico svg{ width:22px; height:22px; }
.benefits h4{
  margin:4px 0 0;
  font-family:var(--sans); font-size:15.5px; font-weight:500; color:var(--verde);
}
.benefits p{ margin:5px 0 0; font-size:13px; line-height:1.6; color:var(--texto-suave); }

/* ---------- Tarjeta del formulario ---------- */
.applycard{
  background:#fffdfa; border-radius:22px; padding:36px 40px 34px;
  box-shadow:0 40px 80px -46px rgba(19,44,39,.42);
}
.applycard__legend{
  margin:28px 0 14px;
  font-family:var(--sans); font-size:16.5px; font-weight:500; color:var(--verde);
}
.applycard__legend:first-child{ margin-top:0; }
.applycard .grid2{ margin-top:0; gap:20px; }
.applycard .grid2 + .grid2{ margin-top:16px; }
.applycard .field__label{ font-size:14px; color:#3c433d; }
.field__label--strong{
  display:block; margin:22px 0 8px;
  font-family:var(--sans); font-size:15px; font-weight:500; color:var(--verde);
}
.applycard .field--half{ max-width:calc(50% - 10px); margin-top:16px; }
.applycard input, .applycard select, .applycard textarea{ height:46px; }
.applycard textarea{ height:auto; }

.checks-grid{
  display:grid; grid-template-columns:repeat(4,max-content);
  justify-content:space-between; gap:12px 16px; margin-bottom:4px;
}
.check{
  display:flex; align-items:center; gap:9px; cursor:pointer; white-space:nowrap;
  font-family:var(--sans); font-size:13.5px; color:#3c433d;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:0 0 auto; width:17px; height:17px; border-radius:4px;
  border:1.4px solid #c9c2b6; background:#fff; position:relative;
  transition:background .18s ease, border-color .18s ease;
}
.check__box::after{
  content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .18s ease;
}
.check input:checked + .check__box{ background:var(--verde); border-color:var(--verde); }
.check input:checked + .check__box::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check__box{ box-shadow:0 0 0 3px rgba(28,107,82,.18); }

.dropzone{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1.6px dashed #cbc4b7; border-radius:12px; background:#fdfbf7;
  padding:20px 20px 18px; margin-top:8px;
  transition:border-color .2s ease, background .2s ease;
}
.dropzone.is-over{ border-color:var(--verde); background:#f2f7f2; }
.dropzone__ico{ width:26px; height:26px; color:var(--verde); stroke-width:1.5; }
.dropzone__title{ margin:8px 0 0; font-family:var(--sans); font-size:13.5px; color:#3c433d; }
.dropzone__or{ margin:4px 0 8px; font-family:var(--sans); font-size:13px; color:#8b9086; }
.dropzone__meta{ margin:6px 0 0; font-family:var(--sans); font-size:12.5px; color:#8b9086; }
.dropzone__meta + .dropzone__meta{ margin-top:2px; }
.dropzone__file{
  margin:10px 0 0; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--verde);
}
.btn--sm{ height:36px; padding:0 20px; font-size:13.5px; border-radius:999px; }
.btn--block{ width:100%; height:52px; border-radius:12px; margin-top:26px; font-size:15.5px; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .postula__grid{ grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:40px; }
  .applycard{ padding:28px 26px 26px; }
  .checks-grid{ grid-template-columns:repeat(3,max-content); }
}

@media (max-width:960px){
  .tjhero{ min-height:0; padding:calc(var(--nav-h) + 54px) 0 64px; background-position:72% center; }
  .tjhero::before{ background:linear-gradient(175deg,rgba(250,247,242,.93) 0%,rgba(250,247,242,.8) 58%,rgba(250,247,242,.45) 100%); }
  .tjhero__title{ font-size:36px; }
  .tjhero__title br, .tjhero__lead br{ display:none; }
  .perks{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px; }
  .perk h3 br{ display:none; }
  .perk p br{ display:none; }

  .postula{ padding:72px 0; }
  .postula__grid{ grid-template-columns:1fr; gap:44px; }
  .postula__col .sec-title{ font-size:32px; }
  .postula__col .sec-title br, .postula__p br, .benefits p br{ display:none; }
  .applycard .field--half{ max-width:none; }
  .checks-grid{ grid-template-columns:repeat(2,max-content); justify-content:start; gap:12px 28px; }
}

@media (max-width:620px){
  .perks{ grid-template-columns:1fr; }
  .checks-grid{ grid-template-columns:1fr; justify-content:start; }
  .tjhero__title{ font-size:31px; }
}

/* =========================================================
   PIE DE PÁGINA
   Colores y medidas tomados del mockup "pie de boton pagina.png"
   ========================================================= */
.pie{
  position:relative; overflow:hidden;
  background:#faf8f3;                 /* mismo crema en que terminan la onda y las hojas */
  padding:0 0 0;
}

.pie__onda{ display:block; width:100%; height:auto; }

.pie__hoja{ position:absolute; pointer-events:none; user-select:none; }
.pie__hoja--si{ left:0; top:100px; width:98px; }
.pie__hoja--id{ right:0; bottom:75px; width:167px; }

.pie__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.7fr .9fr 1.25fr 1.45fr;
  column-gap:48px; padding-top:26px; padding-bottom:56px;
}

/* ---- Columna de marca ---- */
.pie__logo{ width:200px; height:auto; margin:0 0 22px; }
.pie__desc{
  margin:0 0 26px; font-size:16.5px; line-height:1.78; color:#1c2b35;
}

.redes{ display:flex; gap:16px; list-style:none; margin:0; padding:0; }
.redes a{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:#3b503e; color:#fff; text-decoration:none;
  transition:background .25s ease, transform .2s ease;
}
.redes a:hover{ background:#2b3d2e; transform:translateY(-2px); }
.redes svg{ width:21px; height:21px; stroke-width:1.7; }

/* ---- Títulos de columna ---- */
.pie__titulo{
  margin:0; font-family:var(--serif); font-size:23px; font-weight:600; color:#203a28;
}
.pie__titulo::after{
  content:""; display:block; width:47px; height:2.2px; border-radius:2px;
  background:#b6976c; margin:13px 0 27px;
}

/* ---- Listas ---- */
.pie__links, .pie__servicios, .pie__contacto{ list-style:none; margin:0; padding:0; }

.pie__links li + li, .pie__servicios li + li{ margin-top:19px; }
.pie__links a, .pie__servicios a{
  display:flex; align-items:center; gap:11px;
  font-size:17px; color:#1c2b35; text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.pie__links a:hover, .pie__servicios a:hover{ color:#1c6b52; transform:translateX(3px); }
.pie__links svg{ width:14px; height:14px; color:#234132; stroke-width:2.2; flex:0 0 auto; }

.pie__servicios a::before{
  content:""; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#374d3d;
}
.pie__servicios li:nth-child(even) a::before{ background:#ae9570; }

/* ---- Contacto ---- */
.pie__contacto li{ display:flex; align-items:center; gap:15px; }
.pie__contacto li + li{ margin-top:22px; }
.pie__ico{
  flex:0 0 auto; display:grid; place-items:center; width:41px; height:41px;
  border-radius:50%; background:#e9efe6; color:#2f4a35;
}
.pie__ico svg{ width:19px; height:19px; stroke-width:1.7; }
.pie__contacto a{ font-size:17px; color:#1c2b35; text-decoration:none; word-break:break-word; }
.pie__contacto a:hover{ color:#1c6b52; }
.pie__horario{ font-size:17px; line-height:1.45; color:#1c2b35; }

/* ---- Barra inferior ---- */
.pie__legal{ position:relative; z-index:2; background:#3c5240; }
.pie__legal p{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:0; min-height:72px; padding:14px 24px;
  font-family:var(--sans); font-size:16px; color:#fdfefd; text-align:center;
}
.pie__hojita{ width:19px; height:19px; color:#a8bfa0; flex:0 0 auto; }

/* ---- Responsive ---- */
@media (max-width:1180px){
  .pie__grid{ column-gap:36px; }
  .pie__hoja--si{ width:80px; }
  .pie__hoja--id{ width:130px; }
}

@media (max-width:960px){
  .pie__grid{ grid-template-columns:1fr 1fr; row-gap:44px; padding-bottom:44px; }
  .pie__marca{ grid-column:1 / -1; }
  .pie__desc br{ display:none; }
  .pie__desc{ max-width:52ch; }
  .pie__hoja{ display:none; }
}

@media (max-width:620px){
  .pie__grid{ grid-template-columns:1fr; row-gap:38px; }
  .pie__legal p{ font-size:14.5px; }
}

/* =========================================================
   PÁGINA DE CONFIRMACIÓN (gracias.html)
   ========================================================= */
.gracias{
  display:flex; align-items:center; min-height:100vh;
  padding:calc(var(--nav-h) + 60px) 0 80px;
  background:linear-gradient(180deg,#faf5ee 0%,#f7f0e9 60%,#f4ebe6 100%);
  text-align:center;
}
.gracias__inner{ max-width:760px; }
.gracias__ico{
  display:grid; place-items:center; width:76px; height:76px; margin:0 auto 26px;
  border-radius:50%; background:#e7efe6; color:var(--verde);
}
.gracias__ico svg{ width:36px; height:36px; stroke-width:1.6; }
.gracias .eyebrow{ margin-bottom:14px; }
.gracias .sec-title{ margin-top:0; }
.gracias .sec-lead{ margin-left:auto; margin-right:auto; }

.gracias__datos{
  display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
  list-style:none; margin:40px 0 0; padding:0;
}
.gracias__datos li{ display:flex; align-items:center; gap:13px; text-align:left; }
.gracias__datos span:last-child{ font-family:var(--sans); font-size:14.5px; line-height:1.45; color:#5b6259; }
.gracias__datos strong{ font-weight:500; color:#22302a; }

.gracias__cta{ display:flex; gap:14px; justify-content:center; margin-top:44px; flex-wrap:wrap; }

@media (max-width:620px){
  .gracias .sec-lead br{ display:none; }
  .gracias__datos{ gap:24px; flex-direction:column; align-items:flex-start; text-align:left; }
  .gracias__cta{ flex-direction:column; align-items:stretch; }
}

/* =========================================================
   CASILLA DE AUTORIZACIÓN DE DATOS (Ley 1581)
   ========================================================= */
.consent{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  margin:22px 0 0; max-width:640px;
}
.consent input{ position:absolute; opacity:0; width:0; height:0; }
.consent .check__box{ margin-top:2px; }
.consent input:checked + .check__box{ background:var(--verde); border-color:var(--verde); }
.consent input:checked + .check__box::after{ transform:rotate(45deg) scale(1); }
.consent input:focus-visible + .check__box{ box-shadow:0 0 0 3px rgba(28,107,82,.18); }
.consent__txt{
  font-family:var(--sans); font-size:13.5px; line-height:1.6; color:#5b6259;
}
.consent__txt a{ color:var(--verde); text-decoration:underline; text-underline-offset:2px; }
.consent__txt a:hover{ color:#134f3c; }
/* dentro de la tarjeta de reserva el espacio es más justo */
.bookform .consent{ margin:18px 0 0; }
.bookform .consent__txt{ font-size:12.5px; }

/* =========================================================
   PÁGINAS LEGALES (politica-datos.html)
   ========================================================= */
.legal{
  padding:calc(var(--nav-h) + 72px) 0 96px;
  background:linear-gradient(180deg,#faf5ee 0%,#f9f4ed 100%);
}
.legal__inner{ max-width:820px; }
.legal .sec-title{ margin-top:14px; }
.legal__meta{
  margin:18px 0 0; font-family:var(--sans); font-size:14px; color:#8b9086;
}
.legal__aviso{
  margin:30px 0 8px; padding:16px 20px; border-radius:12px;
  background:#fdf3e8; border:1px solid #e6d2b8;
  font-size:14.5px; line-height:1.65; color:#7a5a3a;
}
.legal__aviso strong{ color:#5f4327; }
.legal h2{
  margin:42px 0 12px;
  font-family:var(--serif); font-size:24px; font-weight:600; color:var(--titular);
}
.legal p{ margin:0 0 14px; font-size:16px; line-height:1.75; color:var(--texto); }
.legal ul{ margin:0 0 16px; padding-left:22px; }
.legal li{ margin-bottom:9px; font-size:16px; line-height:1.7; color:var(--texto); }
.legal strong{ color:#22302a; }
.legal a{ color:var(--verde); }
.legal mark{
  background:#fdf0d8; color:#8a5f2a; padding:1px 7px; border-radius:5px;
  font-family:var(--sans); font-size:14px;
}
.legal__datos{ list-style:none; padding-left:0; }
.legal__datos li{ padding:9px 0; border-bottom:1px solid rgba(19,44,39,.08); }
.legal__cta{ margin-top:48px; }

@media (max-width:620px){
  .legal{ padding-top:calc(var(--nav-h) + 44px); }
  .legal .sec-title br{ display:none; }
  .legal h2{ font-size:21px; }
}
.pie__legalink{
  color:#cfe0c9; text-decoration:underline; text-underline-offset:3px;
  margin-left:4px;
}
.pie__legalink:hover{ color:#fff; }