/*
Theme Name: KAERU — versión corregida
Author: KAERU
Description: Tema de ocho páginas para el proyecto KAERU en La Culata, Mérida.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kaeru
*/


    /* =========================================================
       KAERU — DESIGN SYSTEM
    ========================================================= */

    :root {
      --earth: #4A4036;
      --moss: #5D6650;
      --stone: #8A8277;
      --sand: #CDBFA8;

      --cream: #F4F1EB;
      --white: #FAF9F6;
      --dark: #302B26;

      --max-width: 1280px;
      --radius: 2px;

      --serif: "DM Serif Display", Georgia, serif;
      --sans: "DM Sans", Arial, sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--white);
      color: var(--earth);
      font-family: var(--sans);
      line-height: 1.7;
      font-size: 16px;
      overflow-x: hidden;
    }

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
    }

    .container {
      width: min(90%, var(--max-width));
      margin: auto;
    }

    .eyebrow {
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--stone);
      margin-bottom: 22px;
    }

    h1,
    h2,
    h3 {
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1.05;
    }

    h2 {
      font-size: clamp(42px, 5vw, 72px);
    }

    h3 {
      font-size: 32px;
    }

    .section {
      padding: 130px 0;
    }

    .section-small {
      padding: 90px 0;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 28px;
      border: 1px solid transparent;
      font-size: 13px;
      letter-spacing: .06em;
      transition: .3s ease;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--moss);
      color: var(--white);
    }

    .btn-primary:hover {
      background: var(--earth);
      transform: translateY(-2px);
    }

    .btn-outline {
      border-color: rgba(74,64,54,.4);
      background: transparent;
      color: var(--earth);
    }

    .btn-outline:hover {
      background: var(--earth);
      color: var(--white);
    }

    /* =========================================================
       NAVIGATION
    ========================================================= */

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      transition: .35s ease;
    }

    header.scrolled {
      background: rgba(250,249,246,.95);
      backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 rgba(74,64,54,.08);
    }

    nav {
      width: min(92%, 1380px);
      height: 88px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      font-family: var(--serif);
      font-size: 30px;
      letter-spacing: .08em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .nav-links a {
      position: relative;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 0;
      height: 1px;
      background: var(--moss);
      transition: .3s;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .mobile-menu {
      display: none;
      background: none;
      border: none;
      font-size: 25px;
      color: var(--earth);
    }

    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: flex-end;
      color: white;
      background:
        linear-gradient(
          to top,
          rgba(40,34,28,.65),
          rgba(40,34,28,.12) 65%
        ),
        url("https://images.unsplash.com/photo-1510798831971-661eb04b3739?auto=format&fit=crop&w=2200&q=90")
        center/cover;
    }

    .hero-content {
      width: min(90%, var(--max-width));
      margin: 0 auto;
      padding: 170px 0 100px;
    }

    .hero .eyebrow {
      color: rgba(255,255,255,.72);
    }

    .hero h1 {
      max-width: 850px;
      font-size: clamp(65px, 9vw, 130px);
      margin-bottom: 30px;
    }

    .hero-description {
      max-width: 600px;
      font-size: 18px;
      color: rgba(255,255,255,.88);
      margin-bottom: 36px;
    }

    .hero-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero .btn-outline {
      border-color: rgba(255,255,255,.6);
      color: white;
    }

    .hero .btn-outline:hover {
      background: white;
      color: var(--earth);
    }

    .scroll-indicator {
      position: absolute;
      bottom: 35px;
      right: 5%;
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      writing-mode: vertical-rl;
      opacity: .65;
    }

    /* =========================================================
       INTRO
    ========================================================= */

    .intro {
      background: var(--cream);
    }

    .intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
    }

    .intro-text {
      max-width: 580px;
    }

    .intro-text p {
      font-size: 18px;
      margin-top: 30px;
      color: #665e55;
    }

    .intro-quote {
      margin-top: 45px;
      font-family: var(--serif);
      font-size: 31px;
      line-height: 1.25;
    }

    .intro-image {
      height: 650px;
    }

    .intro-image img {
      height: 100%;
    }

    /* =========================================================
       DOMOS
    ========================================================= */

    .domos-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 40px;
      margin-bottom: 65px;
    }

    .domos-header p {
      max-width: 430px;
      color: var(--stone);
    }

    .domos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3px;
    }

    .domo-card {
      position: relative;
      min-height: 570px;
      overflow: hidden;
      color: white;
    }

    .domo-card.large {
      grid-column: span 2;
      min-height: 700px;
    }

    .domo-card img {
      position: absolute;
      inset: 0;
      height: 100%;
      transition: transform .8s ease;
    }

    .domo-card:hover img {
      transform: scale(1.04);
    }

    .domo-overlay {
      position: absolute;
      inset: 0;
      padding: 45px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: linear-gradient(
        to top,
        rgba(35,30,25,.7),
        transparent 65%
      );
    }

    .domo-number {
      font-size: 11px;
      letter-spacing: .2em;
      margin-bottom: 10px;
      opacity: .75;
    }

    .domo-card h3 {
      font-size: 46px;
      margin-bottom: 8px;
    }

    .domo-card p {
      max-width: 420px;
      color: rgba(255,255,255,.82);
    }

    /* =========================================================
       EXPERIENCIA
    ========================================================= */

    .experience {
      background: var(--earth);
      color: var(--white);
    }

    .experience-intro {
      max-width: 700px;
      margin-bottom: 90px;
    }

    .experience-intro .eyebrow {
      color: var(--sand);
    }

    .experience-intro p {
      margin-top: 30px;
      color: rgba(255,255,255,.65);
      font-size: 18px;
    }

    .journey {
      border-top: 1px solid rgba(255,255,255,.18);
    }

    .journey-item {
      display: grid;
      grid-template-columns: 100px 1fr 1fr;
      gap: 50px;
      padding: 45px 0;
      border-bottom: 1px solid rgba(255,255,255,.18);
      align-items: center;
    }

    .journey-number {
      color: var(--sand);
      font-size: 12px;
      letter-spacing: .15em;
    }

    .journey-item h3 {
      font-size: 40px;
    }

    .journey-item p {
      color: rgba(255,255,255,.62);
    }

    /* =========================================================
       PILARES
    ========================================================= */

    .pillars {
      background: var(--cream);
    }

    .pillars-heading {
      max-width: 700px;
      margin-bottom: 80px;
    }

    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border-top: 1px solid rgba(74,64,54,.2);
      border-bottom: 1px solid rgba(74,64,54,.2);
    }

    .pillar {
      padding: 45px 25px;
      border-right: 1px solid rgba(74,64,54,.2);
    }

    .pillar:last-child {
      border-right: none;
    }

    .pillar-number {
      color: var(--moss);
      font-size: 11px;
      letter-spacing: .15em;
    }

    .pillar h3 {
      font-size: 27px;
      margin: 28px 0 18px;
    }

    .pillar p {
      color: var(--stone);
      font-size: 14px;
    }

    /* =========================================================
       GALERÍA
    ========================================================= */

    .gallery {
      padding-bottom: 130px;
    }

    .gallery-heading {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 70px;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr 1fr;
      gap: 8px;
      align-items: start;
    }

    .gallery-grid img:nth-child(1) {
      height: 450px;
    }

    .gallery-grid img:nth-child(2) {
      height: 650px;
    }

    .gallery-grid img:nth-child(3) {
      height: 380px;
      margin-top: 100px;
    }

    .concept-note {
      margin-top: 25px;
      text-align: center;
      font-size: 11px;
      color: var(--stone);
      letter-spacing: .04em;
    }

    /* =========================================================
       HISTORIA
    ========================================================= */

    .story {
      background: var(--sand);
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 110px;
      align-items: center;
    }

    .story-image {
      height: 700px;
    }

    .story-image img {
      height: 100%;
    }

    .story-copy {
      max-width: 560px;
    }

    .story-copy p {
      margin-top: 28px;
      color: #665e55;
    }

    .story-final {
      font-family: var(--serif);
      font-size: 32px;
      line-height: 1.3;
      margin-top: 45px;
    }

    /* =========================================================
       CUADERNO
    ========================================================= */

    .notebook {
      background: var(--white);
    }

    .notebook-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
    }

    .notebook-copy {
      max-width: 600px;
    }

    .notebook-copy p {
      color: var(--stone);
      margin-top: 30px;
    }

    .questions {
      margin-top: 40px;
      border-top: 1px solid rgba(74,64,54,.2);
    }

    .question {
      padding: 18px 0;
      border-bottom: 1px solid rgba(74,64,54,.2);
      font-family: var(--serif);
      font-size: 21px;
    }

    .notebook-image {
      background: var(--cream);
      padding: 45px;
    }

    .notebook-image img {
      aspect-ratio: 4/5;
    }

    /* =========================================================
       ENTORNO
    ========================================================= */

    .environment {
      background: var(--cream);
    }

    .environment-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .environment-image {
      height: 620px;
    }

    .environment-image img {
      height: 100%;
    }

    .environment-copy p {
      margin-top: 30px;
      color: var(--stone);
    }

    /* =========================================================
       RESERVA
    ========================================================= */

    .booking {
      background: var(--moss);
      color: var(--white);
    }

    .booking-inner {
      text-align: center;
      max-width: 850px;
      margin: auto;
    }

    .booking .eyebrow {
      color: var(--sand);
    }

    .booking h2 {
      margin-bottom: 25px;
    }

    .booking-inner > p {
      color: rgba(255,255,255,.7);
      margin-bottom: 50px;
    }

    .booking-form {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: rgba(255,255,255,.08);
      padding: 12px;
      gap: 2px;
      text-align: left;
    }

    .field {
      padding: 20px;
      background: rgba(255,255,255,.06);
    }

    .field label {
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .15em;
      margin-bottom: 8px;
      color: var(--sand);
    }

    .field input,
    .field select {
      width: 100%;
      border: none;
      outline: none;
      background: transparent;
      color: white;
      font-family: var(--sans);
    }

    .field option {
      color: var(--earth);
    }

    .booking-submit {
      grid-column: span 4;
      margin-top: 5px;
    }

    .booking-submit .btn {
      width: 100%;
      background: var(--white);
      color: var(--earth);
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .faq {
      background: var(--white);
    }

    .faq-inner {
      max-width: 900px;
      margin: auto;
    }

    .faq-heading {
      text-align: center;
      margin-bottom: 65px;
    }

    details {
      border-top: 1px solid rgba(74,64,54,.2);
      padding: 25px 0;
    }

    details:last-child {
      border-bottom: 1px solid rgba(74,64,54,.2);
    }

    summary {
      cursor: pointer;
      list-style: none;
      font-family: var(--serif);
      font-size: 23px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      font-family: var(--sans);
      font-size: 20px;
      color: var(--moss);
    }

    details[open] summary::after {
      content: "−";
    }

    details p {
      color: var(--stone);
      padding: 20px 45px 0 0;
    }

    /* =========================================================
       CONTACTO
    ========================================================= */

    .contact {
      background: var(--sand);
    }

    .contact-inner {
      text-align: center;
      max-width: 700px;
      margin: auto;
    }

    .contact-inner p {
      color: #665e55;
      margin: 25px auto 40px;
    }

    .contact-links {
      display: flex;
      justify-content: center;
      gap: 35px;
      flex-wrap: wrap;
      font-size: 13px;
    }

    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
      background: var(--earth);
      color: var(--white);
      padding: 80px 0 30px;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 80px;
      padding-bottom: 70px;
    }

    .footer-logo {
      font-family: var(--serif);
      font-size: 50px;
      letter-spacing: .08em;
    }

    .footer-tagline {
      margin-top: 10px;
      color: var(--sand);
      font-size: 11px;
      letter-spacing: .18em;
    }

    .footer-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .15em;
      color: var(--sand);
      margin-bottom: 20px;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: rgba(255,255,255,.65);
      font-size: 14px;
    }

    .footer-bottom {
      padding-top: 25px;
      border-top: 1px solid rgba(255,255,255,.15);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: rgba(255,255,255,.4);
      font-size: 11px;
    }

    /* =========================================================
       REVEAL ANIMATION
    ========================================================= */

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .8s ease, transform .8s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 900px) {

      .nav-links {
        display: none;
      }

      .mobile-menu {
        display: block;
      }

      .section {
        padding: 90px 0;
      }

      .intro-grid,
      .story-grid,
      .notebook-grid,
      .environment-grid {
        grid-template-columns: 1fr;
        gap: 55px;
      }

      .intro-image,
      .story-image,
      .environment-image {
        height: 500px;
      }

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

      .domo-card.large {
        grid-column: auto;
      }

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

      .pillar {
        border-bottom: 1px solid rgba(74,64,54,.2);
      }

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

      .gallery-grid img:nth-child(2) {
        height: 500px;
      }

      .gallery-grid img:nth-child(3) {
        margin-top: 0;
      }

      .journey-item {
        grid-template-columns: 70px 1fr;
        gap: 20px;
      }

      .journey-item p {
        grid-column: 2;
      }

      .booking-form {
        grid-template-columns: 1fr 1fr;
      }

      .booking-submit {
        grid-column: span 2;
      }

      .footer-top {
        grid-template-columns: 1fr 1fr;
      }

      .footer-brand {
        grid-column: span 2;
      }
    }

    @media (max-width: 600px) {

      body {
        font-size: 15px;
      }

      .hero-content {
        padding-bottom: 80px;
      }

      .hero h1 {
        font-size: 62px;
      }

      .hero-description {
        font-size: 16px;
      }

      .hero-buttons {
        flex-direction: column;
        align-items: stretch;
      }

      .domos-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .domo-card,
      .domo-card.large {
        min-height: 470px;
      }

      .domo-overlay {
        padding: 30px;
      }

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

      .pillar {
        border-right: none;
      }

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

      .gallery-grid img,
      .gallery-grid img:nth-child(1),
      .gallery-grid img:nth-child(2),
      .gallery-grid img:nth-child(3) {
        height: 400px;
        margin: 0;
      }

      .journey-item {
        grid-template-columns: 1fr;
      }

      .journey-item p {
        grid-column: auto;
      }

      .booking-form {
        grid-template-columns: 1fr;
      }

      .booking-submit {
        grid-column: auto;
      }

      .footer-top {
        grid-template-columns: 1fr;
        gap: 45px;
      }

      .footer-brand {
        grid-column: auto;
      }

      .footer-bottom {
        flex-direction: column;
      }

      .contact-links {
        flex-direction: column;
        gap: 15px;
      }
    }

  
/* Cabecera para páginas interiores */
.page-masthead { background:var(--cream); padding:170px 0 80px; }
.page-masthead h1 { font-size:clamp(48px,7vw,94px); max-width:900px; }
.page-masthead .eyebrow { margin-bottom:18px; }
.page-interior > .section:first-of-type { padding-top:95px; }
.nav-links a[aria-current="page"] { color:var(--moss); font-weight:600; }
@media (max-width:900px) { .page-masthead { padding:135px 0 55px; } }

/* Marca principal en el encabezado */
header, header.scrolled { background:rgba(250,249,246,.98); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(74,64,54,.1); }
nav { width:min(94%,1380px); height:88px; gap:24px; }
nav .logo { display:flex; align-items:center; flex:none; width:210px; height:70px; font-size:0; }
nav .logo img { display:block; width:100%; height:auto; object-fit:contain; }
.nav-links { gap:clamp(12px,1.3vw,20px); font-size:11px; white-space:nowrap; letter-spacing:.04em; }
.nav-links .btn { min-height:42px; padding:0 15px; font-size:11px; }
.page-masthead { padding:145px 0 65px; }
.page-masthead h1 { font-size:clamp(46px,5vw,72px); }
@media(max-width:1100px) { .nav-links { gap:10px; font-size:10px; } .nav-links .btn { padding:0 10px; font-size:10px; } nav .logo { width:180px; } }
@media(max-width:900px) { nav .logo { width:180px; } .nav-links { white-space:normal; } }
@media(max-width:600px) { nav .logo { width:165px; } .page-masthead { padding:130px 0 55px; } }

nav .logo { width:220px; height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; }
nav .logo img { width:188px; height:auto; }
nav .logo .logo-tagline { display:block; font-family:var(--sans); font-size:8px; line-height:1.2; color:var(--earth); letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; margin-top:-4px; }
@media(max-width:1100px) { nav .logo { width:185px; } nav .logo img { width:165px; } nav .logo .logo-tagline { font-size:7px; letter-spacing:.08em; } }
@media(max-width:900px) { nav .logo { width:188px; } }

/* Inicio: fotografía justo debajo del cintillo claro y texto legible */
#header { background:#FAF9F6; box-shadow:0 1px 0 rgba(74,64,54,.1); }
.hero { margin-top:88px; min-height:calc(100vh - 88px); background:linear-gradient(90deg,rgba(24,27,24,.72) 0%,rgba(24,27,24,.48) 48%,rgba(24,27,24,.13) 100%),linear-gradient(0deg,rgba(24,27,24,.38),transparent 60%),url("https://images.unsplash.com/photo-1510798831971-661eb04b3739?auto=format&fit=crop&w=2200&q=90") center/cover; }
.hero-content { padding-top:90px; }
.hero h1, .hero-description, .hero .eyebrow { text-shadow:0 1px 8px rgba(0,0,0,.16); }
@media(max-width:600px) { .hero { background-position:center; } .hero-content { padding-top:75px; } }

/* Estados honestos durante el desarrollo del proyecto */
.project-note { margin:24px 0 0; padding:15px 18px; border-left:2px solid var(--moss); background:var(--cream); color:var(--earth); font-size:14px; line-height:1.6; max-width:680px; }
.status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:670px; margin-top:34px; }
.status-card { border:1px solid rgba(74,64,54,.24); padding:22px; text-align:left; }
.status-card strong { display:block; font-family:var(--serif); font-weight:400; font-size:26px; margin-bottom:5px; }
.status-card span { color:var(--stone); font-size:13px; }
@media(max-width:600px) { .status-grid { grid-template-columns:1fr; } }

.hero::after { content:"Imagen de referencia"; position:absolute; top:22px; right:5%; color:rgba(255,255,255,.85); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }