:root{
  --color-primary:#ff6b00;
  --color-primary-600:#e55f00;
  --color-primary-700:#c75400;

  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-line:#ececf1;
  --color-shadow: rgba(18, 18, 23, 0.08);

  --color-text:#1f2937;
  --color-muted:#6b7280;

  --container:1200px;
  --radius:14px;
  --radius-sm:10px;

  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-xxl: clamp(28px, 5vw, 44px);
  --fs-xl: clamp(22px, 4vw, 32px);
  --fs-lg: clamp(18px, 2.6vw, 22px);
  --fs-md: 16px;
  --fs-sm: 14px;

  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  --focus: 0 0 0 3px rgba(255,107,0,.4);
  --btn-shadow: 0 6px 20px rgba(255,107,0,.25);
}

/* Reset mínimo + base */
*{box-sizing:border-box; min-width:0}
html,body{height:100%}
html,body{max-width:100%; overflow-x:hidden}

/* Scroll suave general */
html{scroll-behavior:smooth;}

body{
  margin:0;
  font: 400 var(--fs-md)/1.6 var(--font);
  color:var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:16px}

/* Secciones: padding + margen de scroll cabecera fija */
.section{
  padding: var(--space-6) 0;
  scroll-margin-top: 80px;
}
.section__title{font-size:var(--fs-xl);margin:.25rem 0 0}
.section__subtitle{color:var(--color-muted);margin:.25rem 0 var(--space-4)}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:10000}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--color-line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:68px;
}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--color-text); text-decoration:none}
.brand__logo{font-size:22px}
.brand__text{font-weight:800; letter-spacing:.2px}

/* LOGO */
.brand__logo-img{
  display:block;
  height:65px;      /* tamaño base escritorio */
  width:auto;
  border-radius:0;  /* que no herede el border-radius genérico de img */
  margin-top: 10px;
  margin-bottom: 10px;
}

.site-nav__list{list-style:none; margin:0; padding:0; display:flex; gap:.25rem; align-items:center}
.site-nav__list a{
  display:block; padding:.5rem .75rem; border-radius:999px; border:1px solid transparent; color:var(--color-text)
}
.site-nav__list a:hover{border-color: var(--color-line); background:#fff}

.header-cta{display:flex; gap:.5rem}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; border:1px solid transparent; text-decoration:none;
  padding:.8rem 1.1rem; border-radius:999px; font-weight:700;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms, border-color 180ms;
}
.btn--sm{padding:.55rem .9rem}
.btn--primary{background:var(--color-primary); color:#fff; box-shadow: var(--btn-shadow)}
.btn--primary:hover{background:var(--color-primary-600); transform: translateY(-1px)}
.btn--ghost{background:#fff; color:var(--color-text); border-color:var(--color-line)}
.btn--ghost:hover{border-color:#e5e7eb; transform: translateY(-1px)}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* Eyebrow / bullets */
.eyebrow{
  display:inline-block; color:#7a3d00; background: #fff0e6;
  padding:.25rem .6rem; border-radius:999px; font-weight:700; letter-spacing:.2px
}
.hero__bullets{display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1rem; padding-left:1.2rem; margin: var(--space-2) 0}
.hero__bullets li{position:relative}
.hero__bullets li::marker{content:""}
.hero__bullets li::before{
  content:""; position:absolute; left:-1.2rem; top:.6rem; width:.55rem; height:.55rem; border-radius:2px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-700));
  box-shadow: 0 0 0 3px rgba(255,107,0,.18);
}

/* Hero split */
.hero__grid{display:grid; gap: var(--space-5); align-items:center}
.hero__content{order:2}
.hero__media{order:1}
.hero__title{font-size:var(--fs-xxl); line-height:1.15; margin: .5rem 0}
.hero__subtitle{color:#374151}
.hero__cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top: .5rem}
.hero__microcopy{color:var(--color-muted); margin-top:.5rem}

@media (min-width: 900px){
  .hero__grid{grid-template-columns:1.15fr .85fr}
  .hero__content{order:1}
  .hero__media{order:2; justify-self:end}
  .hero__media img{border-radius:20px; box-shadow: 0 10px 40px var(--color-shadow)}
}

/* Cards */
.card{
  background: var(--color-surface);
  border:1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: 0 10px 30px var(--color-shadow);
}
.card--soft{background:#fff}
.card--lift{transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms}
.card--lift:hover{transform: translateY(-2px); box-shadow: 0 16px 40px var(--color-shadow)}

/* Grid */
.grid{display:grid; gap:var(--space-4)}
.grid--2{grid-template-columns:1fr}
@media (min-width: 860px){
  .grid--2{grid-template-columns:1fr 1fr}
}

/* Lists */
.list{padding-left:1.2rem}
.list--dots{list-style: disc; color:var(--color-muted)}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top: .5rem}
.chip{
  padding:.35rem .6rem; border:1px solid var(--color-line); border-radius:999px;
  background:#fff; color:#6b7280; font-weight:600;
}
.chips--badge{margin-top:.5rem}
.chip--sm{ padding:.25rem .5rem; font-size: var(--fs-sm); color:#9ca3af; }

/* ======================== Servicios ========================= */
.subsection{margin-top: var(--space-4)}
.subsection__title{ margin: 0 0 .5rem; font-weight:800; letter-spacing:.2px; color:var(--color-muted); }
.feature-list{display:grid; gap:.75rem; padding:0; margin:0}
@media (min-width: 720px){ .feature-list{grid-template-columns:1fr 1fr} }
.feature{display:flex; align-items:flex-start; gap:.6rem; list-style:none}
.feature__icon{
  width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px;
  color:#fff; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-700));
  border-radius:8px; box-shadow: 0 6px 16px rgba(255,107,0,.25);
}
.feature__text{line-height:1.5}

/* ===== ¿Cómo trabajamos? ===== */
.services .steps{margin-top: 1.25rem;}
.steps{list-style:none; margin:0 0 var(--space-4) 0; padding:0; display:grid; gap:.75rem}
.steps__item{display:flex; align-items:center; gap:.75rem}
.steps__num{
  width:32px; height:32px; display:grid; place-items:center; border-radius:999px; color:#fff; font-weight:800;
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-700)); box-shadow: 0 6px 20px rgba(255,107,0,.25);
}
.steps--cards .steps__item{ background:#fff7f0; border:1px solid var(--color-line); border-radius:12px; padding:.7rem .9rem; }

/* ===== Sección Por qué elegirnos ===== */
.why__grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 860px){ .why__grid{ grid-template-columns: 1fr 1fr; } }
.why__item{ background:#fff; border:1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); box-shadow: 0 10px 30px var(--color-shadow); }
.why__header{ display:flex; align-items:center; gap:.6rem; margin-bottom:.25rem; }
.why__icon{ width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; color:#fff; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-700)); border-radius:8px; box-shadow: 0 6px 16px rgba(255,107,0,.25); }
.why__title{ margin:0; font-weight:800; }
.why__text{ color:#374151; margin:.35rem 0 0; }

/* Reviews */
.reviews__grid{display:grid; gap:var(--space-3); grid-template-columns:1fr}
.review__stars{color:#eab308; letter-spacing:2px; font-size:18px}
.review__text{margin:.5rem 0}
.review__meta{color:var(--color-muted); font-size:var(--fs-sm)}
.review--cta{text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem}
.review__cta-title{margin:0; font-size: var(--fs-lg)}
.review__cta-btn{min-width: 260px; text-align:center}
.review__cta-note{color:var(--color-muted); margin:0}
@media (min-width: 740px){ .reviews__grid{grid-template-columns:repeat(3, 1fr)} }

/* ===== Galería base ===== */
.gallery__grid{display:grid; gap:var(--space-3); grid-template-columns:1fr 1fr}
.gallery__item{background:#fff; border:1px solid var(--color-line); border-radius:var(--radius-sm); overflow:hidden; box-shadow: 0 8px 24px var(--color-shadow)}
.gallery__item figcaption{padding:.5rem .75rem; color: var(--color-muted)}
@media (min-width: 900px){ .gallery__grid{grid-template-columns:repeat(3, 1fr)} }

/* ===== Galería mejorada con filtros y badges ===== */
.gallery__filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom: var(--space-3); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gallery__filters::-webkit-scrollbar{ display:none; }
.chip--filter{ cursor:pointer; user-select:none; }
.chip--filter.is-active{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.gallery__grid--improved{ display:grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px){ .gallery__grid--improved{ grid-template-columns: repeat(3, 1fr); } }
.gallery__item.is-hidden{ display:none; }
.gallery__thumb{ position:relative; overflow:hidden; }
.gallery__img{ width:100%; height:auto; display:block; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.gallery__item:hover .gallery__img{ transform: scale(1.03); }
.gallery__badge{ position:absolute; left:.5rem; top:.5rem; padding:.25rem .55rem; border-radius:999px; font-weight:800; font-size: var(--fs-sm); color:#7a3d00; background:#fff0e6; border:1px solid #ffd7b5; box-shadow: 0 6px 14px rgba(255,107,0,.18); }
.gallery__note{ color: var(--color-muted); margin-top: .25rem; }

/* ===== SOBRE / PRESENTACIÓN ===== */
.about{ background: #fff; }
.about__card{ padding: clamp(1.25rem, 3vw, 2rem); }
.prose p{ margin: .6rem 0; }
.about__cta{ margin-top: 1rem; display:flex; gap:.5rem; flex-wrap:wrap }

/* Form */
.form__row{display:grid; gap:var(--space-3); grid-template-columns:1fr}
.form__control label{display:block; font-weight:700; margin-bottom:.35rem}
.form__control input,
.form__control select,
.form__control textarea{
  width:100%; padding:.85rem .9rem; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff; color:var(--color-text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.02);
}
.form__control input:focus,.form__control select:focus,.form__control textarea:focus{box-shadow:var(--focus)}
.form__control--full{grid-column:1 / -1}
.form__help{color:var(--color-muted)}
.form__hp{position:absolute; left:-10000px}

/* RGPD checkbox */
.form__row--consent{margin-top: var(--space-2)}
.checkbox{ display:flex; align-items:center; gap:.55rem; }
.checkbox input[type="checkbox"]{ width:1.15rem; height:1.15rem; margin:0; accent-color: var(--color-primary); }
.checkbox label{ display:inline; margin:0; font-weight:600; }

/* Acciones del formulario */
.form__actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top: var(--space-4); }
@media (min-width: 780px){ .form__row{grid-template-columns:1fr 1fr} }

/* Address / Map */
.address{font-style:normal; color:var(--color-muted); margin-bottom:var(--space-3)}
.map{display:grid; place-items:center; border:1px solid var(--color-line); border-radius:var(--radius-sm); min-height:220px; overflow:hidden; background:#fff; box-shadow: 0 8px 24px var(--color-shadow)}
.map iframe{display:block; width:100%; height:360px; border:0}

/* Footer */
.site-footer{ border-top:1px solid var(--color-line); padding: var(--space-5) 0; background: #fff; }
.footer__grid{display:grid; gap:var(--space-3); grid-template-columns:1fr}
.footer__nav{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
}
.footer__copy{color:var(--color-muted)}
@media (min-width: 860px){ .footer__grid{grid-template-columns:2fr 1fr} }

/* Botón "Arriba" en footer */
.footer__nav-top{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:600;
  padding:.3rem .75rem;
  border-radius:999px;
  border:1px solid var(--color-line);
  background:#fff;
  color:var(--color-text);
}
.footer__nav-top-icon{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid var(--color-line);
  font-size:12px;
}
.footer__nav-top:hover{
  text-decoration:none;
  border-color:var(--color-primary);
  background:#fff7f0;
}
.footer__nav-top:hover .footer__nav-top-icon{
  border-color:var(--color-primary);
  background:var(--color-primary);
  color:#fff;
}

/* Utilities */
.flow > * + *{margin-top:.6rem}

/* =========================================================
   AJUSTES MÓVILES/TABLET (≤ 920px)
   ========================================================= */
@media (max-width: 920px){

  /* Reducimos escalas tipográficas y espacios en móvil */
  :root{
    --fs-xxl: clamp(22px, 7vw, 32px);
    --fs-xl: clamp(18px, 5.2vw, 26px);
    --fs-lg: clamp(16px, 3.6vw, 19px);
    --fs-md: 15px;
    --fs-sm: 13px;

    --space-6: 2.2rem;
    --space-5: 1.6rem;
    --space-4: 1.05rem;
  }

  .site-header{ position: sticky; top: 0; z-index: 999; }
  .site-header__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: .5rem .6rem;
    min-height: unset;
    padding-block: .45rem;
    padding-inline: 10px;
  }
  .brand__text{ font-size: 15px; }

  /* Logo un poco más pequeño en móvil */
  .brand__logo-img{
    height:28px;
  }

  .site-nav{ grid-column: 1 / -1; grid-row: 2; }
  .site-nav__list{ gap: .2rem; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding-bottom:.2rem; }
  .site-nav__list::-webkit-scrollbar{ display:none; }
  .site-nav__list a{ padding:.4rem .6rem; font-size: 13.5px; }

  .header-cta{ grid-column: 2; grid-row: 1; gap:.4rem; }
  .header-cta .btn{ padding:.5rem .7rem; border-radius:10px; font-weight:800; }

  .container{ padding-inline: 14px; }
  .section{ padding: 1.5rem 0; }

  .hero__grid{ grid-template-columns: 1fr; gap: 1rem; }
  .hero__title{ line-height:1.2; }
  .hero__subtitle{ font-size: var(--fs-md); }
  .hero__media img{ width:100%; max-height: 300px; object-fit: cover; border-radius: 16px; }
  .hero__cta .btn{ flex:1; justify-content:center; padding:.75rem .9rem; }
  .hero__microcopy{ font-size: var(--fs-sm); }

  .about__card{ padding: 1rem; }
  .about__cta .btn{ flex:1 1 auto; justify-content:center; padding:.75rem .9rem; }

  .subsection{ margin-top: .9rem; }
  .subsection__title{ font-size: .95rem; }
  .feature-list{ grid-template-columns: 1fr !important; gap: .6rem; }
  .feature__icon{ width: 24px; height: 24px; border-radius: 6px; }
  .chips{ gap: .35rem; }
  .chip{ font-size: 12.5px; padding:.25rem .5rem; }
  .chip--sm{ font-size: 12px; padding:.2rem .45rem; color:#9ca3af; }

  .steps--cards .steps__item{ padding: .6rem .8rem; }
  .steps__num{ width:28px; height:28px; }

  .why__grid{ grid-template-columns: 1fr; }
  .why__item{ padding: 1rem; }

  .reviews__grid{ grid-template-columns: 1fr !important; gap: .9rem; }
  .review__stars{ font-size: 16px; }
  .review__cta-btn{ width: 100%; }

  .gallery__grid--improved{ grid-template-columns: 1fr; }
  .gallery__item img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }

  .form__control input,
  .form__control select,
  .form__control textarea{
    font-size: 16px;
  }

  .form__row{ grid-template-columns: 1fr !important; gap: .8rem; }
  .form__row--consent{ margin-top: var(--space-3); }
  .form__actions{ margin-top: var(--space-4); display:grid; gap:.6rem; grid-template-columns:1fr; }
  .form__actions .btn{ width:100%; justify-content:center; padding:.8rem 1rem; }

  .map iframe{ height: 240px; }

  .mobile-cta{
    display:block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--color-line);
    padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 18px var(--color-shadow);
  }
  .mobile-cta__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
  .mobile-cta .btn{ width:100%; justify-content:center; padding:.7rem .9rem; }

  body{ padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Microajustes móviles medios (≤ 560px) */
@media (max-width: 560px){
  .hero__bullets{ grid-template-columns: 1fr; }
}

/* Microajustes móviles pequeños (≤ 420px) */
@media (max-width: 420px){
  :root{
    --fs-xxl: clamp(20px, 7.5vw, 28px);
    --fs-xl: clamp(17px, 5.5vw, 22px);
    --fs-lg: 16px;
    --fs-md: 14.5px;
    --fs-sm: 12.5px;
  }
  .hero__media img{ max-height: 240px; }
  .btn{ padding:.75rem .95rem; }
  .header-cta .btn{ padding: .45rem .6rem; }
  .card{ padding: 0.9rem; }
  .section{ padding: 1.25rem 0; }

  /* Logo aún más recogido en móviles muy pequeños */
  .brand__logo-img{
    height:40px;
  }
}

/* =========================
   Barra CTA base (oculta fuera de móvil)
   ========================= */
.mobile-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: none;
  z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--color-line);
  padding: .5rem .75rem;
  box-shadow: 0 -8px 18px var(--color-shadow);
}
.mobile-cta__grid{ display:grid; grid-template-columns:1fr 1fr; gap: .5rem; }
