:root {
  --terracota: #c1653a;
  --terracota-dark: #a24f2b;
  --dark: #2b2620;
  --cream: #faf7f2;
  --text: #3d362e;
  --muted: #6b6255;
  --border: #e7ded0;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

h1,
h2,
h3 {
  color: var(--dark);
  line-height: 1.15;
  font-family: "Poppins", Arial, sans-serif;
}

a {
  color: var(--terracota);
}

/* Header / logo / nav */

.header-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px -8px rgba(43, 38, 32, 0.25);
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.1rem 2rem;
  gap: 1.5rem;
}

.nav-toggle-checkbox {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 0.4rem;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--dark);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2) {
  opacity: 0;
}

.nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  flex: none;
}

.logo-img {
  display: block;
  height: 5.6rem;
  width: auto;
}

.navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.navigation a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.navigation a:hover {
  color: var(--terracota);
}

.navigation .nav-cta {
  padding: 0.55rem 1.1rem;
  border-radius: 0.5rem;
  background: var(--terracota);
  color: var(--white);
  transition: background 0.15s ease, transform 0.15s ease;
}

.navigation .nav-cta:hover {
  background: var(--terracota-dark);
  color: var(--white);
  transform: translateY(-1px);
}

.navigation a.active {
  color: var(--terracota);
}

/* Dropdown submenu (Servicios) */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item > a::after {
  content: " \25BE";
  font-size: 0.7em;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.9rem;
  min-width: 260px;
  z-index: 210;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

.nav-item.dropdown-just-clicked .dropdown {
  display: none !important;
}

.dropdown-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  box-shadow: 0 20px 35px -20px rgba(43, 38, 32, 0.4);
  padding: 0.5rem 0;
}

.dropdown a {
  display: block;
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.dropdown a::after {
  content: none;
}

.dropdown a:hover {
  background: var(--cream);
  color: var(--terracota);
}

.dropdown .dropdown-all {
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--terracota);
}

/* Hero */

.hero {
  position: relative;
  background: linear-gradient(160deg, var(--dark) 0%, #4a3324 55%, var(--terracota) 130%);
  padding: 5.5rem 2rem;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-inner h1 {
  color: var(--white);
  margin: 0;
  font-size: clamp(0.8rem, 4.3vw, 2.5rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.hero-subtitle {
  max-width: 620px;
  margin: 1.25rem auto 2rem;
  color: #f1e6da;
  font-size: 1.15rem;
}

/* Buscador del hero ("¿Qué necesitas resolver?") */

.hero-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto 2rem;
  text-align: left;
}

.hero-search-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}

.hero-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: 0.6rem;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55);
}

.hero-search-icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.9rem;
  color: var(--muted);
  flex: none;
}

.hero-search-box input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.85rem 1rem 0.85rem 0.6rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--text);
  border-radius: 0.6rem;
}

.hero-search-box input:focus {
  outline: 2px solid var(--terracota);
  outline-offset: -2px;
}

.hero-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  background: var(--white);
  border-radius: 0.6rem;
  box-shadow: 0 20px 35px -18px rgba(0, 0, 0, 0.45);
  z-index: 60;
}

.hero-search-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.hero-search-item:last-child {
  border-bottom: none;
}

.hero-search-item:hover {
  background: var(--cream);
}

.hero-search-item-text {
  color: var(--dark);
  font-weight: 600;
  font-size: 0.92rem;
}

.hero-search-item-block {
  color: var(--terracota);
  font-size: 0.78rem;
  font-weight: 700;
}

.hero-search-empty {
  padding: 0.9rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hero-search-empty a {
  font-weight: 700;
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.button {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  border-radius: 0.5rem;
  background: var(--terracota);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--terracota);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.button:hover {
  background: var(--terracota-dark);
  border-color: var(--terracota-dark);
  transform: translateY(-2px);
  color: var(--white);
}

.button-secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.button-secondary:hover {
  background: var(--white);
  color: var(--dark);
  border-color: var(--white);
}

/* Variante para usar sobre fondos claros (la de arriba está pensada
   para fondos oscuros como el hero o el CTA final — sobre un fondo
   claro quedaría blanco sobre blanco, ilegible). */
.button-secondary-light {
  background: transparent;
  color: var(--terracota);
  border-color: var(--terracota);
}

.button-secondary-light:hover {
  background: var(--terracota);
  color: var(--white);
  border-color: var(--terracota);
}

/* Trust strip */

.trust {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.trust-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.trust-item .check {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--terracota);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sections */

.section {
  max-width: 1160px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--terracota);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section h2 {
  max-width: 720px;
  margin: 0 0 2rem;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
}

.section-intro {
  max-width: 720px;
  margin: -1rem 0 2rem;
  color: var(--muted);
}

/* Fondo con transición de imágenes, muy atenuado, detrás de una sección.
   Las imágenes son ilustrativas (generadas con IA para dar ambiente), no
   fotos de proyectos reales — por eso van casi tapadas por el velo de
   color, solo como textura de fondo. */

.section-bg-fade {
  position: relative;
  overflow: hidden;
}

.section-bg-fade > .bg-photos {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-bg-fade > .bg-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: bg-fade-cycle 24s infinite;
}

.section-bg-fade > .bg-photos img:nth-child(1) { animation-delay: 0s; }
.section-bg-fade > .bg-photos img:nth-child(2) { animation-delay: 6s; }
.section-bg-fade > .bg-photos img:nth-child(3) { animation-delay: 12s; }
.section-bg-fade > .bg-photos img:nth-child(4) { animation-delay: 18s; }

.section-bg-fade > .bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(250, 247, 242, 0.72);
}

.section-bg-fade > .section,
.section-bg-fade > .section-inner {
  position: relative;
  z-index: 2;
}

@keyframes bg-fade-cycle {
  0%, 4% { opacity: 0; }
  8%, 21% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .section-bg-fade > .bg-photos img {
    animation: none;
    opacity: 0;
  }
  .section-bg-fade > .bg-photos img:first-child {
    opacity: 1;
  }
}

/* Service cards */

.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.card {
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--white);
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px -20px rgba(43, 38, 32, 0.35);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(193, 101, 58, 0.12);
}

.card-icon-svg {
  width: 1.7rem;
  height: 1.7rem;
  filter: drop-shadow(0 2px 2px rgba(43, 38, 32, 0.28));
}

/* Iconos de las tarjetas de servicio: al pasar el mouse, el icono
   normal se cambia por una pequeña animación relacionada con ese
   oficio (los ladrillos de un muro, una gota de agua, un rodillo de
   pintura...). Solo CSS (transiciones/animaciones + :hover), ningún
   JavaScript — si el navegador no soporta algo de esto, el icono
   normal simplemente se queda fijo. */
.card-icon-anim {
  position: relative;
}

.card-icon-anim .card-icon-base {
  transition: opacity 0.2s ease;
}

.card-icon-anim .card-icon-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card:hover .card-icon-anim .card-icon-base {
  opacity: 0;
}

.card:hover .card-icon-anim .card-icon-hover {
  opacity: 1;
}

/* Reformas integrales: la casa se "construye" de abajo hacia arriba. */

.ri-wall {
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  transition-delay: 0s;
}

.ri-roof {
  transform: translateY(-9px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  transition-delay: 0s;
}

.ri-door {
  transform: scale(0.5);
  opacity: 0;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  transition-delay: 0s;
}

.card:hover .ri-wall,
.card:hover .ri-roof {
  transform: none;
  opacity: 1;
  transition-delay: var(--d, 0s);
}

.card:hover .ri-door {
  transform: scale(1);
  opacity: 1;
  transition-delay: var(--d, 0s);
}

/* Albañilería y acabados: los ladrillos caen y forman un muro. */

.brick {
  transform: translateY(-11px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  transition-delay: 0s;
}

.card:hover .brick {
  transform: translateY(0);
  opacity: 1;
  transition-delay: var(--d, 0s);
}

/* Fontanería y electricidad: la gota cae y hace un pequeño charco; el
   rayo parpadea. */

.fe-drop {
  transform-origin: top center;
  transform: translateY(-2px) scale(0.9);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.4, 1.6);
}

.card:hover .fe-drop {
  transform: translateY(2px) scale(1);
}

.fe-ripple {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  transition: transform 0.3s ease 0.32s, opacity 0.3s ease 0.32s;
}

.card:hover .fe-ripple {
  opacity: 1;
  transform: scale(1);
}

.card:hover .fe-bolt {
  animation: fe-flicker 0.5s steps(1) 2;
  animation-delay: 0.15s;
}

@keyframes fe-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

/* Carpintería: la sierra corta la madera y salta serrín. */

.cp-saw {
  transform-origin: center;
}

.card:hover .cp-saw {
  animation: cp-cut 0.5s ease-in-out 2;
}

@keyframes cp-cut {
  0%, 100% { transform: translateX(-2.5px) rotate(-4deg); }
  50% { transform: translateX(2.5px) rotate(4deg); }
}

.cp-dust {
  opacity: 0;
}

.card:hover .cp-dust {
  animation: cp-dust-pop 0.9s ease-out 1;
  animation-delay: 0.1s;
}

.card:hover .cp-dust-2 {
  animation-delay: 0.35s;
}

@keyframes cp-dust-pop {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px) scale(1); }
}

/* Pintura y decoración: el rodillo se desliza dejando una franja. */

.pd-stripe {
  transition: width 0.5s ease 0.1s;
}

.card:hover .pd-stripe {
  width: 13.5px;
}

.pd-roller {
  transform: translateX(0);
  transition: transform 0.5s ease 0.1s;
}

.card:hover .pd-roller {
  transform: translateX(9px);
}

/* Exteriores y cubiertas: la lluvia cae y rebota fuera del tejado. */

.ec-drop {
  opacity: 0;
}

.card:hover .ec-drop {
  animation: ec-fall 1s ease-in 1;
}

.card:hover .ec-drop:nth-of-type(2) {
  animation-delay: 0.15s;
}

.card:hover .ec-drop:nth-of-type(3) {
  animation-delay: 0.3s;
}

@keyframes ec-fall {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  55% { opacity: 1; transform: translate(0, 6px); }
  100% { opacity: 0; transform: translate(calc(var(--dx, 0) * 6px), 10px); }
}

/* Servicio manitas: se abre la tapa de la caja y asoma una herramienta. */

.sm-lid {
  transform-origin: 3px 9.5px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

.card:hover .sm-lid {
  transform: rotate(-20deg);
}

.sm-tool {
  opacity: 0;
  transform: translateY(6px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s, opacity 0.25s ease 0.25s;
}

.card:hover .sm-tool {
  opacity: 1;
  transform: translateY(0);
}

/* Calcula tu presupuesto: los campos se "rellenan" y termina con un check. */

.cp2-dot {
  transform: scale(0);
  opacity: 0;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  transition-delay: 0s;
}

.card:hover .cp2-dot {
  transform: scale(1);
  opacity: 1;
  transition-delay: var(--d, 0s);
}

.cp2-check {
  opacity: 0;
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset 0.3s ease, opacity 0.2s ease;
  transition-delay: 0s;
}

.card:hover .cp2-check {
  opacity: 1;
  stroke-dashoffset: 0;
  transition-delay: var(--d, 0s);
}

/* Iconos del blog: interruptor que salta, mancha de humedad que
   "late", puerta que se balancea, persiana que baja. */

.pl-switch {
  transition: transform 0.3s ease;
}

.card:hover .pl-switch {
  transform: translateY(-4px);
}

.hm-stain {
  opacity: 0.35;
  transform-origin: center;
}

.card:hover .hm-stain {
  animation: hm-pulse 1.4s ease-in-out 2;
}

.card:hover .hm-stain-2 {
  animation-delay: 0.15s;
}

@keyframes hm-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 0.8; transform: scale(1.08); }
}

.pt-door {
  transform-origin: 5px 12px;
}

.card:hover .pt-door {
  animation: pt-swing 0.9s ease-in-out 1;
}

@keyframes pt-swing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-24deg); }
}

.pj-slats {
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.card:hover .pj-slats {
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .brick,
  .ri-wall,
  .ri-roof,
  .ri-door,
  .fe-drop,
  .fe-ripple,
  .cp-saw,
  .cp-dust,
  .pd-stripe,
  .pd-roller,
  .ec-drop,
  .sm-lid,
  .sm-tool,
  .cp2-dot,
  .cp2-check,
  .pl-switch,
  .hm-stain,
  .pt-door,
  .pj-slats {
    transition: none;
    animation: none;
  }
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--dark);
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Projects placeholder */

.projects-placeholder {
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
  background: var(--white);
}

.projects-placeholder h3 {
  margin: 0 0 0.5rem;
}

/* Galería de proyectos */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.gallery figure {
  margin: 0;
}

.gallery img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
}

.gallery figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.gallery-cta {
  margin-top: 2rem;
}

/* CTA final */

.cta-final {
  max-width: 1160px;
  margin: 0 auto 4rem;
  padding: 3.5rem 2rem;
  border-radius: 1rem;
  background: var(--dark);
  text-align: center;
}

.cta-final h2,
.cta-final p {
  color: var(--white);
}

.cta-final h2 {
  margin: 0 0 0.75rem;
}

.cta-final p {
  max-width: 520px;
  margin: 0 auto 1.75rem;
  color: #e7ddcf;
}

/* Servicios page blocks */

.service-block {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 8.5rem;
}

.service-block:last-child {
  border-bottom: none;
}

.service-block h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.service-block .service-intro {
  color: var(--muted);
  font-style: italic;
  margin: 0 0 1rem;
}

.service-block ul {
  margin: 0;
  padding-left: 1.25rem;
}

.service-block li {
  margin-bottom: 0.4rem;
  scroll-margin-top: 8.5rem;
  border-radius: 0.3rem;
}

.manitas-group {
  margin-top: 1.5rem;
}

.manitas-group h4 {
  margin: 0 0 0.5rem;
  color: var(--terracota);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.manitas-group li {
  scroll-margin-top: 8.5rem;
  border-radius: 0.3rem;
}

/* Resalte momentáneo al llegar desde el buscador del hero */

.search-highlight {
  animation: search-flash 2.4s ease;
}

@keyframes search-flash {
  0% {
    background: rgba(193, 101, 58, 0.28);
    box-shadow: 0 0 0 0.4rem rgba(193, 101, 58, 0.28);
  }
  70% {
    background: rgba(193, 101, 58, 0.28);
    box-shadow: 0 0 0 0.4rem rgba(193, 101, 58, 0.28);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 rgba(193, 101, 58, 0);
  }
}

/* FAQ */

.faq-item {
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  margin-bottom: 0.9rem;
  background: var(--white);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  color: var(--dark);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--terracota);
  font-weight: 800;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin: 0;
  padding: 0 1.4rem 1.2rem;
  color: var(--text);
}

/* Contacto */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-info h2 {
  margin-top: 0;
}

.contact-channel {
  margin-bottom: 1.5rem;
}

.contact-channel h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.contact-channel p {
  margin: 0;
  color: var(--muted);
}

.form-field {
  margin-bottom: 1.1rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dark);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font: inherit;
  color: var(--text);
  background: var(--white);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.form-check input {
  margin-top: 0.2rem;
}

.form-note {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Oficios page */

.small-print {
  font-size: 0.85rem;
  color: var(--muted);
}

.legal-note {
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
}

/* Legal / privacidad */

.legal h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 0 0 0.5rem;
}

.legal-updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}

.legal h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
}

.back-link {
  margin-top: 3rem;
}

.back-link a {
  font-weight: 600;
  text-decoration: none;
}

.back-link a:hover {
  text-decoration: underline;
}

/* Floating WhatsApp button */

.whatsapp-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 10px 25px -10px rgba(43, 38, 32, 0.55);
  z-index: 50;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.whatsapp-float.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.whatsapp-float:hover {
  background: var(--terracota-dark);
  color: var(--white);
}

.whatsapp-float svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Footer */

.footer {
  padding: 2rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.footer a {
  color: var(--muted);
}

.footer a:hover {
  color: var(--terracota);
}

/* Responsive */

@media (max-width: 900px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 640px) {
  .header {
    padding: 0.9rem 1.25rem;
  }

  .nav-toggle-label {
    display: flex;
  }

  .navigation {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 30px -20px rgba(43, 38, 32, 0.35);
  }

  .nav-toggle-checkbox:checked ~ .navigation {
    display: flex;
  }

  .navigation a {
    width: 100%;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
  }

  .navigation .nav-cta {
    width: 100%;
    text-align: center;
    margin-top: 0.4rem;
    border-bottom: none;
  }

  .nav-item {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav-item > a {
    width: 100%;
  }

  /* En móvil no hay :hover fiable, así que el submenú de Servicios no
     se oculta: queda siempre expandido, en flujo normal en vez de
     flotar encima. */
  .nav-item > a::after {
    content: none;
  }

  .dropdown {
    display: block;
    position: static;
    transform: none;
    padding-top: 0.25rem;
    width: 100%;
  }

  .dropdown-inner {
    border: 0;
    box-shadow: none;
    padding: 0 0 0.4rem 1rem;
  }

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

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

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

  .section,
  .cta-final {
    padding: 3rem 1.25rem;
  }
}