/* Dale Maje: rótulos pintados a mano.
   Colores planos, bordes negros de 3px, sombras duras, esquinas rectas. */

@font-face {
  font-family: 'TikTok Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/tiktok-sans-latin.woff2') format('woff2');
}

:root {
  --azul: #1B3FD6;
  --amarillo: #FFC81F;
  --amarillo-claro: #FFF4CC;
  --rojo: #E23A1C;
  --blanco: #FFFFFF;
  --negro: #000000;
  --borde: 3px solid var(--negro);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: 'TikTok Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--azul); }
a:hover { color: var(--negro); }

/* Foco de teclado: anillo negro pegado a la pieza y amarillo por fuera,
   para que se vea sobre blanco, azul, amarillo y negro. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 4px solid var(--amarillo);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--negro);
}

.contenedor {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.salto {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--amarillo);
  color: var(--negro);
  font-weight: 700;
  border: var(--borde);
  transform: translateY(-200%);
}
.salto:focus { transform: none; }

/* ---------- Botones: una cara que se hunde contra su sombra ---------- */

.boton {
  --sombra: 6px;
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--negro);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--negro);
  transform: translate(var(--sombra), var(--sombra));
}
.boton__cara {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 22px;
  border: var(--borde);
  background: var(--amarillo);
  color: var(--negro);
  text-align: center;
  line-height: 1.2;
  transition: transform .24s var(--rebote);
}
.boton:hover { color: var(--negro); }
.boton:active .boton__cara {
  transform: translate(var(--sombra), var(--sombra));
  transition-duration: .06s;
  transition-timing-function: ease-out;
}

.boton--plano { --sombra: 0px; }
.boton--plano:active .boton__cara { transform: translate(3px, 3px); }

@media (hover: hover) {
  .boton:hover .boton__cara { transform: translate(-2px, -2px); }
  .boton--plano:hover .boton__cara { transform: translate(-4px, -4px); }
  .boton:active .boton__cara { transform: translate(var(--sombra), var(--sombra)); }
  .boton--plano:active .boton__cara { transform: translate(3px, 3px); }
}

.boton--blanco .boton__cara { background: var(--blanco); color: var(--azul); }
.boton--azul .boton__cara { background: var(--azul); color: var(--blanco); }
.boton--chico .boton__cara { min-height: 44px; padding: 8px 16px; }
.boton--grande .boton__cara { min-height: 60px; padding: 14px 26px; font-size: 20px; }
.boton--whatsapp .boton__cara { min-height: 62px; padding: 14px 20px; font-size: 19px; }
.boton--ancho { display: flex; width: 100%; }
.boton--ancho .boton__cara { min-height: 60px; padding-left: 12px; padding-right: 12px; font-size: 18px; }
.boton--redondo,
.boton--redondo::before,
.boton--redondo .boton__cara { border-radius: 12px; }
.boton__icono {
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  fill: currentColor;
}

/* ---------- Encabezado ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--azul);
  color: var(--blanco);
}
/* Raya negra que aparece cuando la barra ya no está sobre el azul del inicio */
.barra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 3px;
  background: var(--negro);
  opacity: 0;
  transition: opacity .2s linear;
}
.barra--suelta::after { opacity: 1; }

/* Una sola fila: logo a la izquierda; a la derecha, la hamburguesa (celular) o los enlaces (escritorio) */
.barra__fila {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.marca {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  color: var(--blanco);
  text-decoration: none;
}
.marca:hover { color: var(--amarillo); }
.marca__logo {
  display: block;
  width: auto;
  height: 44px;
}
/* Nombre junto al pájaro, solo en el encabezado */
.marca__nombre {
  margin-left: 10px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: var(--amarillo);
}
.marca:hover .marca__nombre { color: var(--blanco); }
/* Sin JavaScript no hay hamburguesa: los enlaces pueden bajar a una segunda fila */
html:not(.js) .barra__fila { flex-wrap: wrap; }
.barra__nav {
  display: flex;
  align-items: center;
}
.barra__enlace {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blanco);
  text-decoration: none;
}
.barra__enlace:hover { color: var(--amarillo); }
.barra__nav .boton { margin-left: 3px; font-size: 15px; }
.barra__nav .boton__cara { padding-left: 8px; padding-right: 8px; }

/* Botón de hamburguesa (solo en celular, ver la regla de 767px más abajo) */
.hamburguesa {
  display: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--borde);
  border-radius: 0;
  background: var(--amarillo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--rebote);
}
.hamburguesa:active {
  transform: translate(2px, 2px);
  transition-duration: .06s;
}
.hamburguesa__raya {
  position: absolute;
  left: 9px;
  top: 19px;
  width: 24px;
  height: 4px;
  background: var(--negro);
  transition: transform .26s var(--rebote), opacity .12s linear;
}
.hamburguesa__raya:nth-child(1) { transform: translateY(-9px); }
.hamburguesa__raya:nth-child(3) { transform: translateY(9px); }
/* Abierto: las tres rayas se vuelven una X */
.hamburguesa[aria-expanded="true"] .hamburguesa__raya:nth-child(1) { transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__raya:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburguesa[aria-expanded="true"] .hamburguesa__raya:nth-child(3) { transform: rotate(-45deg); }

/* Panel del menú: queda debajo de la barra, que sigue visible con el logo y la X */
.menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: calc(var(--alto-barra, 68px) + 20px) 24px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--azul);
  color: var(--blanco);
  will-change: transform;
}
.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
/* 24 px de letra, pero cada enlace mide 44 px de alto para tocarlo bien */
.menu__enlace {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blanco);
  text-decoration: none;
}
.menu__enlace:hover,
.menu__enlace:active { color: var(--amarillo); }

@media (max-width: 767.98px) {
  html.js .barra__nav { display: none; }
  html.js .hamburguesa { display: block; }
  html.js .menu:not([hidden]) { display: flex; }
  /* Con el menú abierto la página de atrás no se desplaza.
     El body queda "visible" a propósito: si también se bloqueara, la barra
     dejaría de quedarse pegada arriba y se perdería la X para cerrar. */
  html.menu-abierto { overflow: hidden; }
  html.menu-abierto body { overflow: visible; }
  html.menu-abierto .barra { touch-action: none; }
  html.menu-abierto .barra::after { opacity: 0; }
}

/* ---------- Inicio ---------- */

.inicio {
  background: var(--azul);
  color: var(--blanco);
  padding: 28px 0 60px;
}

.rotulo {
  /* En escritorio manda 17vw (como el diseño); en celular crece hasta 30vw para llenar el ancho de la pantalla */
  font-size: clamp(72px, max(17vw, min(30vw, 150px)), 230px);
  font-weight: 900;
  line-height: .92;
  color: var(--amarillo);
  font-kerning: none;
  isolation: isolate;
  /* --golpe mueve la sombra roja; --sombra-visible la enciende */
  --golpe: 1;
  --sombra-visible: 1;
}
.rotulo__linea {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}
.rotulo__linea::before {
  content: attr(data-texto);
  content: attr(data-texto) / "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: var(--rojo);
  opacity: var(--sombra-visible);
  transform: translate(calc(var(--golpe) * .045em), calc(var(--golpe) * .045em));
}
.rotulo__letra {
  display: inline-block;
  will-change: transform;
}

.lema {
  margin-top: 24px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--amarillo);
}
.pintar { display: inline-block; vertical-align: top; }
.pintar__dentro { display: block; padding-right: .12em; }
.pintando { overflow: hidden; }

.inicio__texto {
  margin-top: 24px;
  max-width: 720px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.35;
}
.inicio__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 16px;
  margin-top: 32px;
}

/* ---------- Secciones y títulos ---------- */

.seccion { padding: 60px 0; }

.titulo {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 900;
  line-height: 1;
}
.titulo__texto { display: block; }
.titulo--azul { color: var(--azul); }
.titulo--rotulo {
  color: var(--amarillo);
  text-shadow: .05em .05em 0 var(--rojo);
}
/* Brochazo que "pinta" el título (lo crea main.js) */
.titulo__brocha {
  position: absolute;
  inset: -6px -10px;
  background: var(--amarillo);
  border: var(--borde);
  transform: scaleX(0);
  pointer-events: none;
  will-change: transform;
}
.servicios .titulo__brocha { background: var(--azul); }
.contacto .titulo__brocha { background: var(--rojo); }

.entradilla {
  margin-top: 16px;
  max-width: 620px;
  font-size: 20px;
}

/* ---------- Sitios ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.tarjeta {
  position: relative;
  display: flex;
}
/* La sombra dura es un bloque negro escondido detrás de la tarjeta */
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--negro);
  transition: transform .28s var(--rebote);
}
.tarjeta__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  border: var(--borde);
  background: var(--blanco);
  transition: transform .28s var(--rebote);
}
.tarjeta:hover .tarjeta__caja,
.tarjeta:focus-within .tarjeta__caja { transform: translate(-5px, -5px); }
.tarjeta:hover::before,
.tarjeta:focus-within::before { transform: translate(7px, 7px); }

.tarjeta__marco {
  padding: 20px;
  border-bottom: var(--borde);
}
.tarjeta__marco--azul { background: var(--azul); }
.tarjeta__marco--amarillo { background: var(--amarillo); }
.tarjeta__marco--rojo { background: var(--rojo); }
.tarjeta__captura {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: var(--borde);
  background: var(--blanco);
}
.tarjeta__pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 12px;
  border: 3px dashed var(--negro);
  font-weight: 600;
  text-align: center;
}
.tarjeta__texto {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  padding: 20px;
}
.tarjeta__nombre {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}
.tarjeta__tipo {
  font-weight: 700;
  color: var(--azul);
}
.tarjeta__enlace {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tarjeta--tuyo .tarjeta__caja {
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 22px;
  border-style: dashed;
}
.tarjeta--tuyo p { font-size: 20px; }
.tarjeta__pregunta {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--rojo);
}

/* ---------- Lo que hacemos: cuadrícula de recuadros ---------- */

.servicios {
  background: var(--amarillo);
  border-top: var(--borde);
  border-bottom: var(--borde);
}
.servicios__lema {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--azul);
}
.servicios__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.servicio {
  position: relative;
  display: flex;
}
/* Sombra dura de 7px: un bloque negro detrás del recuadro */
.servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--negro);
  transform: translate(7px, 7px);
  transition: transform .28s var(--rebote);
}
.servicio__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-width: 0;
  padding: 24px;
  border: var(--borde);
  background: var(--blanco);
  transition: transform .28s var(--rebote);
}
.servicio:hover .servicio__caja,
.servicio:active .servicio__caja { transform: translate(-4px, -4px); }
.servicio:hover::before,
.servicio:active::before { transform: translate(10px, 10px); }

.servicio__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 4px;
  border: var(--borde);
}
.servicio__icono--azul { background: var(--azul); color: var(--amarillo); }
.servicio__icono--rojo { background: var(--rojo); color: var(--blanco); }
.servicio__icono svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.servicio h3 {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

/* Botón "Ver todos los servicios", debajo de los 4 recuadros del inicio */
.servicios__todos { margin-top: 36px; }

/* ----- Página servicios.html ----- */

/* Franja azul de arriba, con el título de la página */
.portada {
  background: var(--azul);
  color: var(--blanco);
  padding: 20px 0 48px;
}
.portada__titulo { font-size: clamp(44px, 9vw, 96px); }
.portada .lema { margin-top: 14px; }
.portada__texto {
  margin-top: 14px;
  max-width: 620px;
  font-size: 18px;
}

/* Recuadro de servicio con detalle: ícono junto al título, descripción y "Qué incluye" */
.servicios__rejilla--detalle { margin-top: 0; }
.servicio__cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
}
.servicio__cabeza .servicio__icono { flex: none; margin-bottom: 0; }
.servicio__nombre {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}
.incluye {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 3px dotted var(--negro);
}
.servicio .incluye__titulo {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}
.incluye__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.incluye__lista li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.4;
}
.incluye__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--negro);
  background: var(--amarillo);
}

/* Precio: sello amarillo con el monto en córdobas y el aproximado en dólares debajo */
.precio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 3px dotted var(--negro);
}
.precio__sello {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  border: var(--borde);
  background: var(--amarillo);
  box-shadow: 4px 4px 0 var(--negro);
}
.precio__fila {
  display: flex;
  flex-direction: column;
}
.precio__monto {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}
.precio__usd {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
/* Etiqueta roja pequeña sobre el sello (texto negro: el blanco no se lee en tamaño chico sobre rojo) */
.precio__etiqueta {
  display: inline-block;
  margin-bottom: -6px;
  padding: 2px 10px;
  border: var(--borde);
  background: var(--rojo);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  transform: rotate(-3deg);
}
.precio__nota { font-size: 15px; }
.precio__cotizar { margin-top: 2px; }

/* En el inicio el sello va más chico y sin botón */
.servicios__rejilla:not(.servicios__rejilla--detalle) .precio { gap: 8px; padding-top: 12px; }
.servicios__rejilla:not(.servicios__rejilla--detalle) .precio__sello { padding: 8px 12px; }
.servicios__rejilla:not(.servicios__rejilla--detalle) .precio__monto { font-size: 19px; }
.servicios__nota {
  margin-top: 16px;
  max-width: 620px;
  font-size: 16px;
}
.portada__nota {
  margin-top: 12px;
  max-width: 620px;
  font-size: 16px;
  color: var(--amarillo);
  font-weight: 700;
}

/* Bloque azul del final */
.cierre {
  background: var(--azul);
  color: var(--blanco);
}
.cierre__caja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.cierre__volver {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--blanco);
}
.cierre__volver:hover { color: var(--amarillo); }

/* ---------- Cómo trabajamos ---------- */

/* Fondo amarillo para separarla de "Sitios que hemos hecho" (blanca).
   El título azul sobre amarillo tiene contraste 4.97:1 (pasa AA); los recuadros siguen blancos. */
.proceso {
  background: var(--amarillo);
  border-top: var(--borde);
}
.proceso .titulo__brocha { background: var(--rojo); }

/* Los espacios de arriba y entre filas dejan sitio para el número que sobresale */
.pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 80px 28px;
  margin-top: 92px;
}
.paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 48px 24px 24px;
  border: var(--borde);
  border-radius: 16px;
  background: var(--blanco);
  box-shadow: 7px 7px 0 var(--negro);
}
/* El número rojo va en una etiqueta que sobresale por arriba del recuadro */
.paso__numero {
  position: absolute;
  top: -52px;
  left: 20px;
  padding: 2px 16px 6px;
  border: var(--borde);
  border-radius: 12px;
  background: var(--blanco);
  box-shadow: 4px 4px 0 var(--negro);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  color: var(--rojo);
  transform: rotate(-5deg);
}
.paso h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- Contacto ---------- */

.contacto {
  background: var(--azul);
  color: var(--blanco);
  border-top: var(--borde);
}
.contacto__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: start;
}
.contacto__directo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.contacto__texto {
  max-width: 460px;
  font-size: 20px;
}

/* Formulario: recuadro redondeado con franja amarilla arriba */
.formulario {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--borde);
  border-radius: 16px;
  background: var(--blanco);
  color: var(--negro);
  box-shadow: 8px 8px 0 var(--negro);
}
.formulario__franja {
  padding: 16px 18px;
  border-bottom: var(--borde);
  border-radius: 13px 13px 0 0;
  background: var(--amarillo);
}
.formulario__titulo {
  padding-right: 84px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}
.formulario__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 18px 24px;
}
/* Adorno: etiqueta roja inclinada en la esquina */
.formulario__etiqueta {
  position: absolute;
  top: -26px;
  right: 10px;
  z-index: 1;
  padding: 4px 14px 6px;
  border: var(--borde);
  border-radius: 10px;
  background: var(--rojo);
  box-shadow: 4px 4px 0 var(--negro);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--blanco);
  transform: rotate(8deg);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo label { font-weight: 700; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: var(--borde);
  border-radius: 12px;
  background-color: var(--blanco);
  color: var(--negro);
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
.campo select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 10px;
}
.campo textarea { resize: vertical; }

/* Campo con aviso: borde rojo y el mensaje debajo */
.campo--error input,
.campo--error textarea {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo);
}
.campo__aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}
.campo__aviso[hidden] { display: none; }
.campo__aviso::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border: 2px solid var(--negro);
  background: var(--rojo);
}

/* Campo enfocado: fondo amarillo claro y borde azul grueso */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 3px solid transparent;
  outline-offset: 0;
  border-color: var(--azul);
  background-color: var(--amarillo-claro);
  box-shadow: 0 0 0 3px var(--azul);
}

.formulario__estado { min-height: 54px; }
.formulario__nota { font-size: 16px; }
.formulario__listo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 16px;
}
.formulario__listo p { flex: 1 1 200px; }
.sello {
  display: inline-block;
  padding: 4px 14px;
  border: var(--borde);
  background: var(--amarillo);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  transform: rotate(-6deg);
}

/* ---------- Pie ---------- */

.pie {
  background: var(--negro);
  color: var(--blanco);
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.marca--pie {
  font-size: 24px;
  color: var(--amarillo);
}
.marca--pie:hover { color: var(--blanco); }
.pie__texto { font-size: 16px; }

/* ---------- Botón flotante de WhatsApp ---------- */

.flotante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--blanco);
  -webkit-tap-highlight-color: transparent;
  transition: transform .4s var(--rebote), opacity .2s linear, visibility 0s;
}
.flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--negro);
  transform: translate(4px, 4px);
}
.flotante__cara {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: var(--borde);
  border-radius: 50%;
  background: #128C7E;
  transition: transform .24s var(--rebote);
}
.flotante svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}
.flotante:hover { color: var(--blanco); }
.flotante:active .flotante__cara {
  transform: translate(4px, 4px);
  transition-duration: .06s;
  transition-timing-function: ease-out;
}
@media (hover: hover) {
  .flotante:hover .flotante__cara { transform: translate(-2px, -2px); }
  .flotante:active .flotante__cara { transform: translate(4px, 4px); }
}
/* Escondido: en el inicio, en Contacto y con el menú abierto. Al aparecer rebota. */
html.js .flotante:not(.flotante--visible),
html.menu-abierto .flotante {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(.4);
  transition: transform .2s ease-in, opacity .2s linear, visibility 0s linear .2s;
}

/* ---------- Animación de entrada ---------- */

.entrada { display: none; }
html.intro .entrada {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  cursor: pointer;
}
.entrada__fondo {
  position: absolute;
  inset: 0;
  background: var(--azul);
}
.entrada__mancha {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  visibility: hidden;
  will-change: transform, opacity;
}
.entrada__mancha svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: 'TikTok Sans', 'Segoe UI', Arial, sans-serif;
}
.mancha__sombra { fill: var(--rojo); }
.mancha__forma,
.trazo {
  stroke: var(--negro);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.mancha__forma { fill: var(--amarillo); }
.detalle { opacity: 0; }

/* Gotas de pintura (entrada y confirmación del formulario) */
.gota {
  position: absolute;
  border: var(--borde);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Pantallas medianas y grandes ---------- */

@media (min-width: 540px) {
  .boton--ancho .boton__cara { padding-left: 22px; padding-right: 22px; font-size: 20px; }
  .marca { font-size: 26px; }
  .barra__enlace { padding: 0 12px; font-size: 18px; }
  .barra__nav { gap: 4px; }
  .barra__fila { gap: 4px 12px; }
  .barra__nav .boton { margin-left: 8px; font-size: 18px; }
  .barra__nav .boton__cara { padding-left: 18px; padding-right: 18px; }
}

@media (min-width: 700px) {
  .contenedor { padding-left: 24px; padding-right: 24px; }
  .barra__fila { padding-top: 20px; padding-bottom: 20px; }
  .inicio { padding: 56px 0 72px; }
  .seccion { padding: 80px 0; }
  .tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }
  /* Mientras la tarjeta de Romero's esté oculta hay 5 recuadros: este ocupa dos columnas y cierra la fila */
  .tarjeta--tuyo { grid-column: span 2; }
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 100px;
  }
  .servicios__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada { padding: 48px 0 64px; }
  .portada__texto { font-size: 20px; }
  .servicios__todos { margin-top: 44px; }
  .formulario__franja { padding: 18px 28px; }
  .formulario__cuerpo { padding: 26px 28px 28px; }
  .formulario__etiqueta { right: -12px; }
  .tarjeta__texto { padding: 24px; }
  .tarjeta__enlace { font-size: 18px; }
  .tarjeta--tuyo .tarjeta__caja { padding: 32px; }
  .boton--whatsapp .boton__cara { min-height: 66px; padding: 16px 28px; font-size: 22px; }
}

@media (min-width: 768px) {
  .marca__logo { height: 52px; }
  .marca__nombre { margin-left: 12px; font-size: 28px; }
  .flotante { right: 24px; bottom: 24px; }
}

@media (min-width: 1000px) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servicios__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .servicios__rejilla--detalle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ajustes solo para celular ---------- */

@media (max-width: 699.98px) {
  /* Inicio: menos aire arriba para que el rótulo grande y los dos botones quepan en la primera pantalla */
  .inicio { padding: 16px 0 56px; }
  .lema { margin-top: 18px; }
  .inicio__texto { margin-top: 16px; }
  .inicio__botones { margin-top: 24px; }

  /* Textos de apoyo un punto más chicos, para que los recuadros respiren */
  .entradilla,
  .contacto__texto { font-size: 18px; }
  .servicio__caja p,
  .paso p,
  .tarjeta__texto p { font-size: 17px; }

  /* Las sombras duras ya no llegan casi al borde: queda el mismo margen a los dos lados */
  .servicios__rejilla,
  .pasos { margin-right: 7px; }
  .formulario { margin-right: 8px; }

  /* Más aire entre el botón de WhatsApp y el formulario (la etiqueta "¡Dale!" sobresale) */
  .contacto__rejilla { gap: 60px; }
}

@media (max-width: 539.98px) {
  /* Los dos botones del inicio, del mismo ancho y uno debajo del otro */
  .inicio__botones {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .inicio__botones .boton,
  .servicios__todos .boton { width: calc(100% - 6px); }
  /* Para que "Ver sitios que hemos hecho" quepa en un renglón hasta en pantallas de 320 px */
  .inicio__botones .boton__cara {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 18px;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .boton__cara,
  .tarjeta__caja,
  .tarjeta::before,
  .servicio__caja,
  .servicio::before,
  .hamburguesa,
  .hamburguesa__raya,
  .campo input,
  .campo select,
  .campo textarea,
  .flotante__cara { transition: none; }
  .flotante,
  html.js .flotante:not(.flotante--visible),
  html.menu-abierto .flotante { transform: none; transition: opacity .2s linear, visibility 0s; }
  .tarjeta:hover .tarjeta__caja,
  .tarjeta:focus-within .tarjeta__caja,
  .tarjeta:hover::before,
  .tarjeta:focus-within::before { transform: none; }
  .servicio:hover .servicio__caja,
  .servicio:active .servicio__caja { transform: none; }
  .servicio:hover::before,
  .servicio:active::before { transform: translate(7px, 7px); }
}