/* ---------------------------------------------------------
   Aplomos — Página principal
   Tokens
--------------------------------------------------------- */
:root {
  --azul:          #2563eb;
  --azul-oscuro:   #1e3a8a;
  --azul-hover:    #17306f;
  --azul-suave:    #eef2fb;
  --borde:         #e5e7eb;
  --borde-azul:    #c7d2e8;
  --borde-campo:   #dbe2ef;
  --gris-claro:    #f7f9fd;

  /* Azules claros: solo se usan dentro de la banda azul, para el
     dibujo de la habitación y para el texto sobre fondo oscuro */
  --azul-claro:    #93c5fd;
  --azul-palido:   #bfdbfe;
  --fondo:         #f3f5f9;
  --blanco:        #ffffff;
  --texto:         #374151;
  --texto-fuerte:  #111827;
  --texto-suave:   #6b7280;
  --texto-tenue:   #9ca3af;

  --sombra-barra: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 28px -20px rgba(17, 24, 39, .35);
  --sombra-card:  0 1px 2px rgba(17, 24, 39, .04), 0 24px 48px -32px rgba(17, 24, 39, .25);
}

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

body {
  margin: 0;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-oscuro); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

.page {
  min-height: 100vh;
  background: var(--fondo);
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------
   Cabecera
--------------------------------------------------------- */
/* La banda azul. Va fija arriba y el script le cambia la altura
   según se baja: empieza ocupando casi toda la ventana y acaba
   siendo una barra fina. La altura de aquí es la que se ve si el
   JavaScript no llega a ejecutarse. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 80vh;
  background: var(--azul-oscuro);
  border-bottom: 1px solid var(--azul-hover);
  /* Sin `overflow: hidden` a propósito: el panel del menú cuelga
     por debajo del borde de la banda y aquí se recortaría. Lo que
     de verdad necesitaba recorte es el dibujo, y ese lo lleva en
     su propio .habitacion. */
}

/* La interfaz (logo, buscador, sesión) va por encima del dibujo */
.header-ui {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
}

/* Dentro de la banda, logo y acciones van colocados a mano en
   las esquinas: el buscador necesita el centro libre para viajar */
.site-header .brand {
  position: absolute;
  left: 24px;
  top: 49px;
}

.header-acciones {
  position: absolute;
  right: 24px;
  top: 41px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Marca */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand-mark { flex-shrink: 0; }

.brand-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--azul-oscuro);
}
.brand-dot { color: var(--azul); }

/* Sobre el azul de la banda el nombre va en blanco */
.site-header .brand-name { color: var(--blanco); }
.site-header .brand-dot { color: var(--azul-claro); }

/* El titular de la portada

   Va centrado sobre el buscador, en el hueco azul que antes
   estaba vacío. pointer-events: none para que, mientras se
   desvanece, no se coma ningún clic destinado al buscador. */
.hero-texto {
  position: absolute;
  left: 50%;
  top: 19%;
  translate: -50%;
  width: min(980px, calc(100% - 48px));
  text-align: center;
  pointer-events: none;
}

.hero-titulo {
  margin: 0;
  /* clamp: 26px en móvil, 42px en pantalla grande, y por el
     medio crece con el ancho de la ventana. Ancho y tamaño están
     medidos para que en escritorio quepa en UNA línea: dos líneas
     no entran en el hueco que queda sobre el buscador. */
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--blanco);
  text-wrap: balance;
}

.hero-sub {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--azul-palido);
  text-wrap: pretty;
}

/* En ventanas bajas (portátiles de pantalla pequeña, navegador
   con muchas barras) el hueco entre el logo y el buscador se
   queda corto y el titular llegaría a rozar el logo. Se encoge
   un punto y vuelve a caber holgado. */
@media (max-height: 680px) {
  .hero-titulo { font-size: clamp(22px, 2.8vw, 32px); }
  .hero-sub {
    margin-top: 10px;
    font-size: 14px;
  }
}

/* Buscador

   Flota dentro de la banda: el script le pone left, top y width
   en píxeles para llevarlo del centro de la habitación a la fila
   de arriba. Los valores de aquí son los de reposo, los que se
   ven mientras el script todavía no ha pintado. */
.site-header .searchbar {
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  width: min(680px, calc(100% - 48px));
  max-width: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 18px 40px -24px rgba(9, 20, 54, .6);
}

.searchbar {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 680px;
  padding: 10px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-barra);
  flex-wrap: nowrap;
}

.search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 56px;
}
.search-field--wide { flex: 1.6; }

.search-field > svg { flex-shrink: 0; }

.search-field-body {
  flex: 1;
  min-width: 0;
  display: grid;
}

.search-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.search-input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--texto-fuerte);
}
.search-input::placeholder {
  color: var(--texto-fuerte);
  opacity: .55;
}

.search-divider {
  width: 1px;
  background: var(--borde);
  margin: 8px 0;
}

.btn-search {
  flex-shrink: 0;
  white-space: nowrap;
  height: 56px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: 12px;
  background: var(--azul-oscuro);
  color: var(--blanco);
  cursor: pointer;
  transition: background .15s;
}
.btn-search:hover { background: var(--azul-hover); }

/* Acciones de cabecera */
.btn-login {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--borde-azul);
  border-radius: 10px;
  background: var(--blanco);
  color: var(--azul-oscuro);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-login:hover {
  background: var(--azul-suave);
  border-color: var(--azul-oscuro);
}

.btn-menu {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1.5px solid var(--borde-azul);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-menu:hover {
  background: var(--azul-suave);
  border-color: var(--azul-oscuro);
}
.btn-menu span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--azul-oscuro);
}

/* Los mismos botones, pero sobre el azul de la banda: fondo
   translúcido y todo en blanco para que se lean */
.site-header .btn-login,
.site-header .btn-menu {
  background: rgba(23, 48, 111, .55);
  border-color: rgba(147, 197, 253, .6);
  color: var(--blanco);
}
.site-header .btn-login:hover,
.site-header .btn-menu:hover {
  background: var(--azul-hover);
  border-color: var(--blanco);
}
.site-header .btn-menu span { background: var(--blanco); }
.site-header .usuario-actual { color: var(--azul-palido); }


/* ---------------------------------------------------------
   Menú de las tres rayas (variante E)
--------------------------------------------------------- */

/* El envoltorio es la referencia desde la que cuelga el panel */
.menu {
  position: relative;
  flex-shrink: 0;
}

/* Las tres rayas se cruzan en X al abrir. Se mueve la primera
   hacia abajo y la tercera hacia arriba hasta encontrarse en el
   centro, girándolas; la del medio simplemente se apaga. */
.btn-menu span {
  width: 20px;
  transition: transform .18s ease, opacity .18s ease;
}

.menu[data-abierto] .btn-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[data-abierto] .btn-menu span:nth-child(2) { opacity: 0; }
.menu[data-abierto] .btn-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Botón abierto: se queda "encendido" para que se vea que el
   panel que hay debajo es suyo */
.site-header .menu[data-abierto] .btn-menu {
  background: var(--azul-hover);
  border-color: var(--blanco);
}

/* El panel

   visibility (y no display) para que la apertura se pueda animar.
   Oculto también deja de ser alcanzable con el tabulador, que es
   justo lo que hace falta: un menú cerrado no debe poder recibir
   el foco. */
.menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: min(520px, calc(100vw - 32px));
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 48px -24px rgba(9, 20, 54, .45);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.menu[data-abierto] .menu-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Las dos columnas: a quién sirve cada una */
.menu-columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menu-col {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px 16px;
}

/* La primera columna es la del cliente nuevo; la segunda, la del
   que ya tiene obra, va sobre fondo gris para distinguirlas de un
   vistazo sin necesidad de leer los títulos */
.menu-col:first-child { border-right: 1px solid var(--borde); }
.menu-col--obra { background: var(--gris-claro); }

.menu-titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.menu-col a {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto-fuerte);
  text-decoration: none;
}
.menu-col a:hover {
  color: var(--azul-oscuro);
  text-decoration: underline;
}

/* El pie: el teléfono, que es lo que más se busca en un menú de
   obras, destacado sobre el azul de la marca */
.menu-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--borde);
  background: var(--azul-oscuro);
}

.menu-tel {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blanco);
  text-decoration: none;
}
.menu-tel:hover {
  color: var(--blanco);
  text-decoration: underline;
}

.menu-horario {
  font-size: 13px;
  color: var(--azul-claro);
}

/* ---------------------------------------------------------
   Contenido
--------------------------------------------------------- */
.main {
  position: relative;
  z-index: 10;
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 20px;
  /* Hueco para la banda: al ir fija no ocupa sitio en el flujo,
     así que hay que reservárselo. El script sustituye este valor
     por la altura real en cuanto se ejecuta. */
  padding-top: calc(80vh + 24px);
}

/* Encabezado de la rejilla de profesionales */
.main-titulo {
  margin: 0 0 32px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--texto-fuerte);
}

.grid {
  display: grid;
  gap: 56px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Tarjeta de profesional */
.pro-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: var(--sombra-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pro-photo {
  position: relative;
  flex: 1;
  min-height: 300px;
  background: repeating-linear-gradient(135deg, var(--azul-suave) 0 10px, #f7f9fd 10px 20px);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Foto real del profesional: cubre todo el recuadro sin
   deformarse, recortando lo que sobre. Cuando la ficha no tiene
   foto se enseña .photo-label sobre el fondo rayado. */
.pro-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--texto-tenue);
}

.rating {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(30, 58, 138, .92);
  color: var(--blanco);
}

.pro-body {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pro-info { min-width: 0; }

.pro-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--texto-fuerte);
}

.pro-role {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--texto-suave);
}

.pro-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-work {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  white-space: nowrap;
  border: 1.5px solid var(--azul-oscuro);
  border-radius: 8px;
  background: var(--azul-oscuro);
  color: var(--blanco);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-work:hover {
  background: var(--azul-hover);
  border-color: var(--azul-hover);
}

.btn-call {
  width: 34px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--borde-azul);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--azul-oscuro);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-call:hover {
  border-color: var(--azul-oscuro);
  background: var(--azul-suave);
}

/* ---------------------------------------------------------
   El dibujo de la habitación

   Todo son rectángulos de colores: no hay ni una imagen. Las
   medidas van en porcentaje, así que el dibujo se estira con la
   banda. El script mueve la caja (top y height) y la opacidad y
   el transform de cada pieza; lo de aquí es su sitio y su forma.
--------------------------------------------------------- */
.habitacion {
  position: absolute;
  left: 0;
  right: 0;
  top: 112px;
  height: 80vh;
  z-index: 0;
  overflow: hidden;
}

/* Resplandor suave del centro, para que el azul no sea plano */
.hab-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(65% 60% at 50% 34%, rgba(147, 197, 253, .18), rgba(30, 58, 138, 0) 72%);
}

/* Cuadrícula de fondo, como un plano */
.hab-reticula {
  position: absolute;
  inset: 0;
  opacity: .4;
  background-image:
    linear-gradient(rgba(147, 197, 253, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 197, 253, .09) 1px, transparent 1px);
  background-size: 68px 68px;
}

/* Las paredes */
.hab-cuarto {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 8%;
  bottom: 6%;
  background: linear-gradient(180deg, #2f6bf0, #1d4ed8);
  border: 2px solid rgba(147, 197, 253, .5);
  transform-origin: bottom center;
}

/* El suelo: siete tablas con tonos ligeramente distintos */
.hab-suelo {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 18%;
  z-index: 1;
  display: flex;
  gap: 5px;
}
.hab-suelo span {
  flex: 1;
  background: linear-gradient(180deg, rgba(147, 197, 253, .95), rgba(147, 197, 253, .55));
}
.hab-suelo span:nth-child(2n) {
  background: linear-gradient(180deg, rgba(147, 197, 253, .9), rgba(147, 197, 253, .5));
}
.hab-suelo span:nth-child(4) {
  background: linear-gradient(180deg, rgba(147, 197, 253, .88), rgba(147, 197, 253, .48));
}

/* La ventana */
.hab-ventana {
  position: absolute;
  left: 11%;
  top: 22%;
  width: 20%;
  height: 38%;
}
.hab-ventana-marco {
  position: absolute;
  inset: 0;
  border: 3px solid var(--blanco);
  background: rgba(191, 219, 254, .3);
}
.hab-ventana-vertical {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
  background: var(--blanco);
}
.hab-ventana-horizontal {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--blanco);
}

/* El armario */
.hab-armario {
  position: absolute;
  right: 16%;
  bottom: 22%;
  width: 12%;
  height: 44%;
}
.hab-armario-cuerpo {
  position: absolute;
  inset: 0;
  background: var(--azul-hover);
  border: 2px solid var(--azul-claro);
}
.hab-armario-pomo {
  position: absolute;
  right: 14%;
  top: 48%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--azul-claro);
}

/* La lámpara y el cono de luz que echa */
.hab-lampara {
  position: absolute;
  left: 46%;
  top: 8%;
  width: 34px;
}
.hab-lampara-cable {
  display: block;
  width: 2px;
  height: 7vh;
  margin: 0 auto;
  background: var(--azul-claro);
}
.hab-lampara-pantalla {
  display: block;
  width: 34px;
  height: 22px;
  border-radius: 0 0 18px 18px;
  background: var(--azul-claro);
}
.hab-luz {
  position: absolute;
  left: 46%;
  top: 10%;
  width: 30%;
  height: 60%;
  margin-left: -13%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 8%, rgba(191, 219, 254, .6), rgba(191, 219, 254, 0) 68%);
  transform-origin: 50% 8%;
}

/* Los dos estantes */
.hab-estante {
  position: absolute;
  left: 58%;
  width: 14%;
  height: 6px;
  border-radius: 3px;
  transform-origin: left center;
}
.hab-estante--alto {
  top: 26%;
  background: rgba(191, 219, 254, .85);
}
.hab-estante--bajo {
  top: 33%;
  background: rgba(191, 219, 254, .6);
}

/* ---------------------------------------------------------
   Ventana de inicio de sesión
--------------------------------------------------------- */
.modal-login {
  /* El descuento de 32px deja aire a los lados en móvil; en
     pantalla grande manda el max-width */
  width: calc(100% - 32px);
  max-width: 460px;
  /* Si la ventana es baja, el dialogo se queda dentro y es el
     cuerpo el que hace scroll (ver .modal-body). Sin este limite
     el contenido se recorta y no hay forma de alcanzarlo: el
     `overflow: hidden` de abajo pisa el `overflow: auto` que los
     navegadores dan por defecto a `dialog:modal`.
     La linea `vh` es el respaldo para navegadores sin `dvh`. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  margin: auto;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 22px;
  box-shadow: 0 40px 80px -40px rgba(17, 24, 39, .55);
  overflow: hidden;
}

/* La columna flex va SOLO en el estado abierto. Puesta en
   `.modal-login` a secas pisaria el `display: none` que el
   navegador da a `dialog:not([open])` -- los estilos del autor
   ganan siempre a los del navegador, da igual la especificidad --
   y el modal se quedaria visible al pie de la pagina con la
   ventana cerrada. */
.modal-login[open] {
  display: flex;
  flex-direction: column;
}

/* El fondo oscuro que el navegador dibuja detrás del diálogo */
.modal-login::backdrop {
  background: rgba(17, 24, 39, .32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Mientras la ventana está abierta, el fondo no se desplaza.
   Se hace desde CSS, mirando si el diálogo tiene el atributo
   [open], en vez de poner y quitar una clase con JavaScript:
   así no puede quedarse el scroll bloqueado si algún cierre no
   pasa por nuestro código (Escape, botón atrás...). */
body:has(.modal-login[open]) { overflow: hidden; }

.modal-head {
  position: relative;
  flex-shrink: 0;
  padding: 26px 28px 0;
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--texto-suave);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.modal-close:hover {
  border-color: var(--azul-oscuro);
  color: var(--azul-oscuro);
  background: var(--azul-suave);
}

.modal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 28px;
  text-decoration: none;
}
.modal-brand:hover { text-decoration: none; }

.modal-brand-name {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--azul-oscuro);
}

.modal-body {
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* min-height: 0 es imprescindible: sin el, un hijo flex nunca
     baja de la altura de su contenido y el scroll no aparece. */
  min-height: 0;
  overflow-y: auto;
}

.field {
  display: grid;
  gap: 6px;
}

.field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.field-input {
  height: 48px;
  width: 100%;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-fuerte);
  background: var(--blanco);
  border: 1.5px solid var(--borde-campo);
  border-radius: 11px;
  outline: none;
  transition: border-color .15s;
}
.field-input:focus { border-color: var(--azul); }

.btn-modal {
  height: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  border-radius: 12px;
  background: var(--azul-oscuro);
  color: var(--blanco);
  cursor: pointer;
  transition: background .15s;
}
.btn-modal:hover { background: var(--azul-hover); }

.modal-note {
  margin: 2px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* Las dos rayas del separador son pseudo-elementos: no hacen
   falta etiquetas vacías en el HTML */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

.divider-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.social {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-social {
  width: 56px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blanco);
  border: 1.5px solid var(--borde-campo);
  border-radius: 11px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-social:hover {
  border-color: var(--azul-oscuro);
  background: var(--gris-claro);
}

.modal-foot {
  flex-shrink: 0;
  padding: 16px 28px;
  border-top: 1px solid #eef1f6;
  background: #fbfcfe;
}
.modal-foot p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--texto-tenue);
  text-align: center;
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   Piezas del acceso
--------------------------------------------------------- */

/* Aviso de error dentro del modal */
.modal-error {
  margin: 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 11px;
  text-wrap: pretty;
}

/* Linea con el correo elegido, en el paso 2 */
.modal-cuenta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-fuerte);
  background: var(--gris-claro);
  border: 1px solid var(--borde);
  border-radius: 11px;
}
.modal-cuenta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-cambiar {
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.btn-cambiar:hover { color: var(--azul-oscuro); }

/* Correo del visitante en la cabecera. El max-width evita que un
   correo largo empuje al resto de la barra. */
.usuario-actual {
  flex-shrink: 1;
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-suave);
}

/* El formulario de salir no debe cambiar la geometria de la
   cabecera: se comporta como el boton que lleva dentro. */
.form-salir {
  flex-shrink: 0;
  margin: 0;
  display: inline-flex;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
/* En pantallas estrechas la cabecera deja de ir fija: se apila,
   se comporta como un bloque normal y se va con el scroll. En un
   móvil el buscador ocupa tres líneas, así que una banda fija que
   se encogiera hasta esa altura se quedaría comiéndose media
   pantalla para siempre. Aquí el dibujo se ve ya montado; el
   script lo detecta por el `position` y no anima nada. */
@media (max-width: 900px) {
  .site-header {
    position: static;
    height: 62vh;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    /* Aquí sí se recorta, al revés que en escritorio: el panel
       del menú cabe de sobra dentro de la banda porque ésta mide
       media pantalla, así que no necesita asomar por debajo. Y el
       recorte mantiene el dibujo dentro de su sitio. */
    overflow: hidden;
  }

  .header-ui {
    order: 1;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px;
  }

  /* El dibujo pasa a ocupar el hueco que quede bajo la interfaz */
  .habitacion {
    order: 2;
    position: relative;
    top: auto;
    height: auto;
    flex: 1;
    min-height: 180px;
  }

  .site-header .brand,
  .header-acciones {
    position: static;
  }
  .header-acciones { margin-left: auto; }

  /* El titular deja de flotar y pasa a ser una línea más de la
     pila, entre la fila del logo y el buscador */
  .hero-texto {
    order: 2;
    position: static;
    translate: none;
    width: 100%;
    flex-basis: 100%;
    text-align: left;
    pointer-events: auto;
  }
  .hero-sub { margin-top: 8px; }

  .site-header .searchbar {
    position: static;
    translate: none;
    width: 100%;
    order: 3;
    flex-basis: 100%;
  }

  /* Ya no hay banda fija por encima: el contenido no tiene que
     reservarle sitio */
  .main { padding-top: 40px; }
}

@media (max-width: 640px) {
  .searchbar {
    flex-wrap: wrap;
    gap: 4px;
  }
  .search-field,
  .search-field--wide { flex: 1 1 100%; }
  .search-divider {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }
  .btn-search {
    flex: 1 1 100%;
    margin-top: 6px;
  }
  .main { padding: 40px 16px; }
  .grid { gap: 32px; }
  .modal-head { padding: 22px 20px 0; }
  .modal-body { padding: 0 20px 22px; }
  .modal-foot { padding: 14px 20px; }
  .modal-brand-name { font-size: 28px; }
  .usuario-actual { display: none; }
  .pro-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Enlaces de la tarjeta hacia el perfil del profesional */
a.btn-work { display: inline-flex; align-items: center; text-decoration: none; }
a.btn-work:hover { color: var(--blanco); text-decoration: none; }
.pro-name a { color: inherit; }
.pro-name a:hover { color: var(--azul-oscuro); text-decoration: none; }

/* ---------------------------------------------------------
   Perfil de profesional (perfil.php) · diseño 1b
   Retrato a pantalla partida, galería filtrable y opiniones
--------------------------------------------------------- */
.perfil-body { background: var(--blanco); }

.perfil-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 72px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}
.perfil-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--azul-oscuro);
}
.perfil-brand:hover { text-decoration: none; color: var(--azul-oscuro); }
.perfil-brand-dot { color: var(--azul); }
.perfil-volver { font-size: 14px; font-weight: 600; color: var(--azul-oscuro); }

/* Botones */
.perfil-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.perfil-btn:hover { text-decoration: none; }
.perfil-btn--wa { background: #15803d; color: var(--blanco); }
.perfil-btn--wa:hover { background: #166534; color: var(--blanco); }
.perfil-btn--azul { background: var(--azul-oscuro); color: var(--blanco); }
.perfil-btn--azul:hover { background: var(--azul-hover); color: var(--blanco); }
.perfil-btn--linea { background: var(--blanco); color: var(--azul-oscuro); border-color: var(--borde-azul); font-weight: 600; }
.perfil-btn--linea:hover { background: var(--azul-suave); color: var(--azul-oscuro); }

/* Portada partida */
.perfil-hero { display: flex; flex-wrap: wrap; }
.perfil-retrato {
  position: relative;
  flex: 1 1 340px;
  min-height: clamp(320px, 44vw, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--azul-suave) 0 10px, var(--gris-claro) 10px 20px);
  overflow: hidden;
}
.perfil-retrato > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perfil-ph { font: 12px "Geist Mono", ui-monospace, monospace; color: var(--texto-tenue); }
.perfil-chapa {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(30, 58, 138, .92);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 700;
}
.perfil-datos {
  flex: 1 1 340px;
  padding: clamp(24px, 5vw, 64px) clamp(20px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  background: var(--azul-oscuro);
  color: var(--blanco);
}
.perfil-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--azul-claro);
}
.perfil-nombre {
  margin: 0;
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}
.perfil-bio { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.55; color: var(--azul-palido); text-wrap: pretty; }
.perfil-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.perfil-cta .perfil-btn { height: 52px; }
.perfil-datos .perfil-btn--linea {
  background: rgba(23, 48, 111, .55);
  border-color: rgba(147, 197, 253, .6);
  color: var(--blanco);
}
.perfil-datos .perfil-btn--linea:hover { background: var(--azul-hover); color: var(--blanco); }
.perfil-cifras {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(147, 197, 253, .25);
}
.perfil-cifras strong { display: block; font-size: 24px; font-weight: 800; }
.perfil-cifras span { font-size: 13px; color: var(--azul-claro); }

/* Cuerpo */
.perfil-cuerpo {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) clamp(16px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.perfil-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.perfil-cuerpo h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--texto-fuerte); }
.perfil-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.perfil-filtro {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--azul-oscuro);
  background: var(--blanco);
  color: var(--azul-oscuro);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.perfil-filtro.is-on { background: var(--azul-oscuro); color: var(--blanco); }

.perfil-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.perfil-obra {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--azul-suave) 0 10px, var(--gris-claro) 10px 20px);
  cursor: pointer;
}
.perfil-obra[hidden] { display: none; }
.perfil-obra:hover { outline: 2px solid var(--azul-oscuro); }
.perfil-obra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.perfil-obra-tit {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-fuerte);
  text-align: left;
}

/* Opiniones */
.perfil-ops { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.perfil-resumen { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.perfil-resumen h2 { margin-bottom: 6px !important; }
.perfil-media { font-size: 56px; font-weight: 900; letter-spacing: -.04em; color: var(--azul-oscuro); line-height: 1; }
.perfil-media-sub { font-size: 14px; color: var(--texto-suave); }
.perfil-barra { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-suave); }
.perfil-barra-n { width: 24px; }
.perfil-barra-p { width: 38px; text-align: right; }
.perfil-barra-pista { flex: 1; height: 8px; border-radius: 4px; background: var(--azul-suave); overflow: hidden; }
.perfil-barra-pista div { height: 100%; background: var(--azul-oscuro); }
.perfil-lista { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; }
.perfil-op { padding: 18px 0; border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 6px; }
.perfil-op-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perfil-op-autor { font-weight: 700; color: var(--texto-fuerte); }
.perfil-op-autor span { font-weight: 500; color: var(--texto-tenue); }
.perfil-op-estrellas { color: var(--azul); letter-spacing: 2px; }
.perfil-op p { margin: 0; font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* Foto ampliada */
.perfil-luz {
  width: calc(100% - 32px);
  max-width: 760px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--blanco);
}
.perfil-luz::backdrop { background: rgba(17, 24, 39, .82); }
.perfil-luz-img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--azul-suave) 0 10px, var(--gris-claro) 10px 20px);
}
.perfil-luz-img img { width: 100%; height: 100%; object-fit: contain; background: #111827; }
.perfil-luz-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.perfil-luz-tit { font-weight: 700; color: var(--texto-fuerte); }
.perfil-luz-sub { font-size: 13px; color: var(--texto-suave); }
.perfil-luz-btns { display: flex; gap: 8px; }
.perfil-luz-btns .perfil-btn { height: 40px; padding: 0 14px; font-size: 15px; }

/* Vacío (perfil no encontrado) */
.perfil-vacio { max-width: 520px; margin: 0 auto; padding: 96px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.perfil-vacio h1 { margin: 0; font-size: 28px; color: var(--texto-fuerte); }
.perfil-vacio p { margin: 0 0 12px; color: var(--texto-suave); }

/* Barra fija de contacto, solo móvil */
.perfil-barra-movil { display: none; }
@media (max-width: 720px) {
  .perfil-volver { font-size: 13px; }
  .perfil-cta { display: none; }
  .perfil-barra-movil {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 12px 16px 20px;
    background: var(--blanco);
    border-top: 1px solid var(--borde);
  }
  .perfil-barra-movil .perfil-btn { flex: 1; }
}

/* ---------------------------------------------------------
   Encargo visto por el cliente (encargo.php)
--------------------------------------------------------- */
.encargo { max-width: 640px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 16px 64px; }
.encargo-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.encargo-tarjeta h1 { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--texto-fuerte); }
.encargo-estado {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--azul-suave);
  color: var(--azul-oscuro);
}
.encargo-estado--liberado { background: #dcfce7; color: #166534; }
.encargo-estado--reembolsado,
.encargo-estado--cancelado { background: #f3f4f6; color: var(--texto-suave); }
.encargo-pro { margin: 0; color: var(--texto-suave); }
.encargo-desc { margin: 0; line-height: 1.6; }
.encargo-importe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.encargo-importe strong { font-size: 28px; font-weight: 900; color: var(--azul-oscuro); letter-spacing: -.02em; }
.encargo-nota { margin: 0; font-size: 14px; color: var(--texto-suave); }
.encargo-error {
  padding: 12px 14px;
  border-radius: 11px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 14px;
  font-weight: 600;
}
.encargo-pago { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.encargo-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.encargo-campos label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-fuerte); }
.encargo-campos input {
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--borde-campo);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
}
.encargo-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.encargo-check input { margin-top: 3px; }
.encargo-pago .perfil-btn { width: 100%; }
.encargo-seguro { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }

/* ---------------------------------------------------------
   Pie de página (diseño 7a)
--------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 10;
  color: var(--azul-palido);
  background-color: var(--azul-oscuro);
  /* La retícula fina, la misma que el dibujo de la cabecera */
  background-image:
    linear-gradient(rgba(147, 197, 253, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 197, 253, .08) 1px, transparent 1px);
  background-size: 68px 68px;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 32px) 32px;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}

.footer-marca {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 200px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
}
.footer-brand:hover { text-decoration: none; }

.footer-brand-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--blanco);
}
.site-footer .brand-dot { color: var(--azul-claro); }

.footer-lema {
  margin: 0;
  max-width: 260px;
  font-size: 14px;
  line-height: 1.55;
}

.footer-redes {
  display: flex;
  gap: 8px;
}

.footer-red {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid rgba(147, 197, 253, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  font: 600 12px "Geist Mono", ui-monospace, monospace;
  transition: background .15s, border-color .15s;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul-claro);
}

.footer-col a {
  font-size: 15px;
  color: var(--blanco);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(147, 197, 253, .25);
  font-size: 13px;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.footer-legal-links a {
  color: var(--blanco);
  text-decoration: underline;
  text-decoration-color: rgba(147, 197, 253, .5);
  text-underline-offset: 3px;
}

/* El hover general de los enlaces es azul oscuro: sobre este fondo
   desaparecerían. Aquí se quedan claros. */
.site-footer a:hover { color: var(--azul-claro); }
.footer-legal-links a:hover { text-decoration-color: currentColor; }
.footer-red:hover {
  color: var(--blanco);
  text-decoration: none;
  background: rgba(147, 197, 253, .15);
  border-color: var(--azul-claro);
}

.site-footer :focus-visible { outline-color: var(--blanco); }

/* ---------------------------------------------------------
   Páginas legales (diseño 7e)
--------------------------------------------------------- */
.legal-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.legal-brand {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--azul-oscuro);
}
.legal-brand:hover { color: var(--azul-oscuro); text-decoration: none; }

.legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.legal-tab {
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--borde);
  background: var(--blanco);
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
}
.legal-tab:hover {
  border-color: var(--borde-azul);
  color: var(--azul-oscuro);
  text-decoration: none;
}
.legal-tab[aria-current="page"] {
  background: var(--azul-oscuro);
  border-color: var(--azul-oscuro);
  color: var(--blanco);
}

.legal-main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(16px, 3vw, 32px) 72px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.legal-indice {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-indice-titulo {
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul);
}

.legal-indice a {
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--borde);
  font-size: 14px;
  color: var(--texto);
}
.legal-indice a:hover {
  border-left-color: var(--azul);
  color: var(--azul-oscuro);
  text-decoration: none;
}

.legal-texto {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.legal-cabeza {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-cabeza h1 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--texto-fuerte);
}

.legal-fecha {
  font: 500 13px "Geist Mono", ui-monospace, monospace;
  color: var(--texto-suave);
}

.legal-intro {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.6;
}

.legal-tabla {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--blanco);
}

.legal-tabla table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.legal-tabla th,
.legal-tabla td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.legal-tabla th {
  background: var(--gris-claro);
  font-weight: 700;
  color: var(--texto-fuerte);
}

.legal-tabla td { border-top: 1px solid var(--borde); }

.legal-tabla code {
  font: 13px "Geist Mono", ui-monospace, monospace;
  color: var(--texto-fuerte);
}

.legal-apartado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Que al saltar desde el índice el título no quede pegado arriba */
  scroll-margin-top: 24px;
}

.legal-apartado h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--texto-fuerte);
}

.legal-apartado p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

.legal-dudas {
  margin: 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--azul-suave);
  font-size: 15px;
  line-height: 1.55;
  color: var(--azul-oscuro);
}
.legal-dudas a { font-weight: 700; }

/* En móvil el índice pasa arriba y deja de ir fijo */
@media (max-width: 860px) {
  .legal-main { grid-template-columns: minmax(0, 1fr); }
  .legal-indice { position: static; }
}

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

/* ---------------------------------------------------------
   Estado de obra · vista del cliente (diseño 6a)
--------------------------------------------------------- */
.obra-body {
  margin: 0;
  background: var(--fondo);
}

.obra-banda {
  background: var(--azul-oscuro);
  padding: 0 clamp(16px, 3vw, 32px) 28px;
  color: var(--azul-palido);
}

.obra-banda-top {
  max-width: 1180px;
  margin: 0 auto;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.obra-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--blanco);
}
.obra-brand:hover { color: var(--blanco); text-decoration: none; }
.obra-brand-dot { color: var(--azul-claro); }

.obra-mis {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-palido);
}
.obra-mis:hover { color: var(--blanco); }

.obra-cabeza {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}

.obra-titulo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.obra-ref {
  font: 500 12px "Geist Mono", ui-monospace, monospace;
  color: var(--azul-claro);
}

.obra-titulo h1 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--blanco);
}

.obra-sub { font-size: 15px; }
.obra-sub a { color: var(--blanco); font-weight: 600; }
.obra-sub a:hover { color: var(--azul-claro); }

.obra-avance {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  flex: 0 1 320px;
}

.obra-avance-linea {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.obra-avance-linea strong { color: var(--blanco); }

.obra-barra {
  height: 10px;
  border-radius: 999px;
  background: rgba(147, 197, 253, .25);
  overflow: hidden;
}
.obra-barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blanco);
}

.obra-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 32px) 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Las tres cifras de arriba */
.obra-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.obra-kpi {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.obra-kpi-titulo { font-size: 13px; color: var(--texto-suave); }

.obra-kpi-valor {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--texto-fuerte);
}

.obra-kpi-nota { font-size: 13px; }
.obra-kpi-nota--ok    { color: #15803d; }
.obra-kpi-nota--mal   { color: #b91c1c; font-weight: 700; }
.obra-kpi-nota--suave { color: var(--texto-suave); }
.obra-kpi-nota--azul  { color: var(--azul-oscuro); }

/* Lista de fases + detalle de la fase abierta */
.obra-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: start;
}

.obra-fases {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.obra-fase {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  color: inherit;
  transition: background .15s;
}
.obra-fase:hover { background: var(--gris-claro); color: inherit; text-decoration: none; }
.obra-fase[aria-current] { background: var(--azul-suave); }

.obra-fase-punto {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: var(--blanco);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.obra-fase--terminada .obra-fase-punto { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.obra-fase--en_curso  .obra-fase-punto { background: var(--azul); border-color: var(--azul-claro); }

.obra-fase-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.obra-fase-nombre { font-size: 16px; font-weight: 700; color: var(--texto-fuerte); }
.obra-fase-fechas { font-size: 13px; color: var(--texto-suave); }

.obra-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.obra-tag--terminada { background: #e7f6ee; color: #15803d; }
.obra-tag--en_curso  { background: #dbeafe; color: var(--azul-oscuro); }
.obra-tag--pendiente { background: #f3f4f6; color: var(--texto-suave); }

.obra-detalle {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 16px;
}
/* Sin esto, el display:flex de arriba ganaría al atributo hidden
   y se verían todas las fases a la vez */
.obra-detalle[hidden] { display: none; }

.obra-detalle-cabeza {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}
.obra-detalle-cabeza h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--texto-fuerte);
}
.obra-detalle-cabeza span { font-size: 14px; color: var(--texto-suave); }

.obra-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.obra-foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--borde);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #eef2fb 0 10px, #f7f9fd 10px 20px);
}
.obra-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.obra-foto-pie {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .85);
  font: 11px "Geist Mono", ui-monospace, monospace;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obra-sin-fotos {
  padding: 28px;
  border-radius: 14px;
  border: 1.5px dashed var(--borde-azul);
  text-align: center;
  font-size: 15px;
  color: var(--texto-suave);
}

.obra-nota {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--gris-claro);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.obra-nota-titulo { font-size: 13px; font-weight: 700; color: var(--azul-oscuro); }
.obra-nota p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
}

/* Mensajes (sin obras, no encontrada...) y lista de obras */
.obra-aviso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 24px;
  font-size: 16px;
  line-height: 1.55;
}
.obra-aviso p { margin: 0 0 12px; }
.obra-aviso p:last-child { margin: 0; }
.obra-aviso a { font-weight: 700; }

.obra-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.obra-lista-item {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--texto-suave);
  font-size: 14px;
  transition: border-color .15s;
}
.obra-lista-item .obra-ref { color: var(--azul); }
.obra-lista-item strong { font-size: 18px; color: var(--texto-fuerte); }
.obra-lista-item:hover { border-color: var(--borde-azul); color: var(--texto-suave); text-decoration: none; }

@media (max-width: 760px) {
  .obra-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   PRUEBA FACHADA 3D

   La cabecera deja de encogerse: es una barra fija con el logo,
   el buscador y la sesión. Debajo va la obra, un tramo alto con
   la escena pegada arriba (sticky) donde el scroll solo hace
   avanzar la animación. El titular baja al principio del
   contenido (.intro) para que sobre la obra no se vea nada.

   --alto-barra lo pone el script con la altura real de la
   barra (0 cuando no va fija). --largo-obra es cuánto scroll
   dura la obra: 1,6 pantallas. Más = más lenta.
   --alto-azul es lo que ocupa la parte azul (barra incluida):
   el 80% de la pantalla. En el 20% de abajo va el titular.
   ========================================================= */
:root {
  --alto-barra: 104px;
  --largo-obra: 160vh;
  --alto-azul: 80svh;
}

/* Transparente mientras va encima de la parte azul, para que no
   se note corte entre la barra y la obra. El script le pone
   .barra-solida cuando lo que pasa por debajo es el contenido. */
.site-header--barra {
  height: auto;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.site-header--barra.barra-solida {
  background: var(--azul-oscuro);
  border-bottom-color: var(--azul-hover);
  box-shadow: 0 12px 34px -22px rgba(9, 20, 54, .7);
}

.site-header--barra .header-ui {
  display: flex;
  align-items: center;
  gap: 28px;
  height: auto;
  padding: 24px 24px 14px;
}

.site-header--barra .brand,
.site-header--barra .header-acciones { position: static; }

.site-header--barra .searchbar {
  position: static;
  translate: none;
  flex: 1 1 auto;
  width: auto;
  max-width: 680px;
  margin: 0 auto;
}

/* El tramo de la obra: empieza bajo la barra y mide lo que dura
   la animación más una pantalla, que es lo que tarda en soltarse
   al final */
.fachada {
  position: relative;
  height: calc(var(--largo-obra) + 100svh);
}

/* Lo que se queda fijo mientras dura la obra: la parte azul y,
   debajo, el titular */
.fachada-fijo {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
}

/* La parte azul: el 80% de la pantalla. Empieza arriba del todo,
   por debajo de la barra transparente, así que el azul y su
   resplandor son una sola pieza. */
.fachada-escena {
  position: relative;
  flex: none;
  height: var(--alto-azul);
  overflow: hidden;
  background: var(--azul-oscuro);
}

/* La imagen del primer fotograma y el canvas ocupan el mismo sitio:
   el canvas tapa la imagen en cuanto el script pinta */
.fachada-lienzo {
  position: absolute;
  z-index: 1;
  left: 4%;
  top: calc(var(--alto-barra) + 2%);
  width: 92%;
  height: calc(98% - var(--alto-barra) - 44px);
  object-fit: contain;
}

/* Abajo, una línea con lo que queda de obra */
.fachada-pie {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px 24px;
}

.fachada-progreso {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(191, 219, 254, .2);
  overflow: hidden;
}
.fachada-progreso i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--azul-claro);
  transform: scaleX(0);
  transform-origin: left;
}

/* La banda ya no reserva el 80% de la pantalla: la obra va en el
   flujo y ocupa su sitio ella sola */
.main { padding-top: 40px; }

/* El titular, en el 20% claro bajo la parte azul. Centrado en
   vertical en ese hueco y alineado con el contenido de abajo. */
.intro {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.intro-titulo {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--texto-fuerte);
  text-wrap: balance;
}
.intro-sub {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* Pantallas estrechas: la barra deja de ir fija (igual que antes la
   banda) y se apila. La obra empieza justo debajo y se pega arriba
   del todo. */
@media (max-width: 900px) {
  .site-header--barra {
    position: relative;
    z-index: 20;
    background: var(--azul-oscuro);
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .site-header--barra .header-ui {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
  }
  .site-header--barra .header-acciones { margin-left: auto; }
  .site-header--barra .searchbar {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .main { padding-top: 40px; }
}

@media (max-width: 640px) {
  .fachada-lienzo { left: 0; width: 100%; }
  .fachada-pie { padding: 0 16px 18px; }
  .intro { padding: 0 16px; }
  .intro-titulo { font-size: 23px; }
  .intro-sub { font-size: 14px; margin-top: 6px; }
  .main { padding: 40px 16px; }
}

/* Pantallas bajas: en el 20% no caben titular y subtítulo, así que
   el subtítulo se queda fuera */
@media (max-height: 640px) {
  .intro-sub { display: none; }
}

/* Quien pide "reducir movimiento" ve la casa terminada, sin tramo
   de scroll */
@media (prefers-reduced-motion: reduce) {
  .fachada { height: auto; }
  .fachada-fijo { position: relative; top: 0; height: auto; }
  .intro { padding-top: 24px; padding-bottom: 8px; }
  .site-header--barra { transition: none; }
}

/* ---------------------------------------------------------
   Pedir presupuesto · solicitud del cliente (diseño 9a)
--------------------------------------------------------- */
.ppto-body {
  margin: 0;
  background: var(--fondo);
}

.ppto-top {
  height: 68px;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--azul-oscuro);
}

.ppto-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--blanco);
}
.ppto-brand:hover { color: var(--blanco); text-decoration: none; }
.ppto-brand-dot { color: var(--azul-claro); }

.ppto-top-lema {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-palido);
}

.ppto-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 3vw, 32px) 48px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ppto-card {
  min-width: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: clamp(18px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Barra de los cuatro pasos */
.ppto-barra {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ppto-barra[hidden] { display: none; }

.ppto-barra-paso {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: 600 13px "Geist", ui-sans-serif, system-ui, sans-serif;
  color: var(--texto-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ppto-barra-paso:disabled { cursor: default; }
.ppto-barra-linea {
  height: 6px;
  border-radius: 999px;
  background: var(--borde);
}
.ppto-barra-paso.es-hecho { color: var(--texto-fuerte); }
.ppto-barra-paso.es-hecho .ppto-barra-linea { background: var(--azul-oscuro); }

/* Cada paso */
.ppto-paso {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ppto-paso[hidden] { display: none; }
/* Sin JavaScript se ven los cuatro pasos seguidos: se separan */
.ppto-form:not(.ppto-js) .ppto-paso + .ppto-paso {
  padding-top: 22px;
  border-top: 1px solid var(--borde);
}

.ppto-paso legend {
  padding: 0;
  margin-bottom: 14px;
}
.ppto-paso h1,
.ppto-paso h2 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--texto-fuerte);
}
.ppto-paso h1:focus,
.ppto-paso h2:focus { outline: none; }

.ppto-ayuda {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* Botones de elección (oficio, plazo, número): radios disfrazados */
.ppto-oficios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.ppto-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ppto-pill { position: relative; }

.ppto-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ppto-pill span {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--borde);
  background: var(--blanco);
  color: var(--texto);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ppto-pill:hover span { border-color: var(--borde-azul); }
.ppto-radio:checked + span {
  background: var(--azul-oscuro);
  border-color: var(--azul-oscuro);
  color: var(--blanco);
}
.ppto-radio:focus-visible + span {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

.ppto-pill--oficio span {
  height: 56px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
}
.ppto-pill--redonda span {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.ppto-pill--numero span {
  width: 56px;
  height: 44px;
  justify-content: center;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}

.ppto-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ppto-grupo-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-fuerte);
}

/* Campos de texto */
.ppto-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-fuerte);
}

.ppto-campo input,
.ppto-campo textarea {
  width: 100%;
  border: 1.5px solid var(--borde-azul);
  border-radius: 12px;
  background: var(--blanco);
  font: 400 15px "Geist", ui-sans-serif, system-ui, sans-serif;
  color: var(--texto-fuerte);
}
.ppto-campo input { height: 48px; padding: 0 14px; }
.ppto-campo textarea { padding: 12px 14px; resize: vertical; line-height: 1.5; }
.ppto-campo input:focus,
.ppto-campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.ppto-campo [aria-invalid="true"] { border-color: #dc2626; }

.ppto-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.ppto-campo--ancho { grid-column: 1 / -1; }

/* Fotos */
.ppto-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.ppto-foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--borde);
  overflow: hidden;
  background: var(--gris-claro);
}
.ppto-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ppto-foto-quitar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, .7);
  color: var(--blanco);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ppto-foto-nueva {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1.5px dashed var(--azul-claro);
  background: var(--gris-claro);
  color: var(--azul-oscuro);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.ppto-foto-nueva:hover { border-color: var(--azul); }
.ppto-foto-nueva[hidden] { display: none; }
.ppto-foto-nueva:focus-within { outline: 2px solid var(--azul); outline-offset: 3px; }

/* Sin JavaScript el selector de archivos se ve tal cual, para
   que se note qué fotos has elegido. Con JavaScript se esconde y
   el recuadro hace de botón. */
.ppto-form:not(.ppto-js) .ppto-foto-nueva {
  aspect-ratio: auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  grid-column: 1 / -1;
}
.ppto-js .ppto-input-fotos {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ppto-fotos-aviso {
  margin: 0;
  font-size: 14px;
  color: #b91c1c;
}
.ppto-fotos-aviso:empty { display: none; }

/* Contacto */
.ppto-info {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--azul-suave);
  font-size: 14px;
  line-height: 1.55;
  color: var(--azul-oscuro);
}

.ppto-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  position: relative;
}
.ppto-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ppto-check-caja {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid var(--borde-azul);
  background: var(--blanco);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppto-check input:checked + .ppto-check-caja {
  background: var(--azul-oscuro);
  border-color: var(--azul-oscuro);
}
.ppto-check input:checked + .ppto-check-caja::after { content: "✓"; }
.ppto-check input:focus-visible + .ppto-check-caja {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}
.ppto-check input[aria-invalid="true"] + .ppto-check-caja { border-color: #dc2626; }

/* Errores */
.ppto-error-general {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  font-size: 15px;
  color: #991b1b;
}
.ppto-error-campo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #b91c1c;
}

/* Campo trampa para robots: fuera de la vista, pero no display:none
   (algunos robots se saltan los campos con display:none) */
.ppto-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Atrás / Siguiente / Publicar */
.ppto-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.ppto-form:not(.ppto-js) .ppto-nav { justify-content: flex-end; }

.ppto-btn {
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font: 700 15px "Geist", ui-sans-serif, system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ppto-btn[hidden] { display: none; }
.ppto-btn:disabled { opacity: .4; cursor: default; }
.ppto-btn--azul {
  border: 0;
  background: var(--azul-oscuro);
  color: var(--blanco);
}
.ppto-btn--azul:hover:not(:disabled) { background: var(--azul-hover); color: var(--blanco); text-decoration: none; }
.ppto-btn--borde {
  border: 1.5px solid var(--borde-azul);
  background: var(--blanco);
  color: var(--azul-oscuro);
}

/* Solicitud enviada */
.ppto-hecho {
  grid-column: 1 / -1;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(28px, 5vw, 48px);
}
.ppto-hecho-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e7f6ee;
  color: #15803d;
  font-size: 30px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppto-hecho h1 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--texto-fuerte);
}
.ppto-hecho p {
  margin: 0 0 8px;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto-suave);
}

/* Columna derecha */
.ppto-lateral {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ppto-lateral-titulo {
  font-size: 16px;
  font-weight: 800;
}

.ppto-resumen {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ppto-resumen .ppto-lateral-titulo { color: var(--texto-fuerte); }

.ppto-resumen-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f3f7;
  font-size: 14px;
}
.ppto-resumen-fila span { color: var(--texto-suave); }
.ppto-resumen-fila strong {
  color: var(--texto-fuerte);
  text-align: right;
  overflow-wrap: anywhere;
}

.ppto-como {
  background: var(--azul-oscuro);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ppto-como .ppto-lateral-titulo { color: var(--blanco); }
.ppto-como p {
  margin: 0;
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--azul-palido);
}
.ppto-como p span {
  font-family: "Geist Mono", ui-monospace, monospace;
  color: var(--azul-claro);
}

@media (max-width: 820px) {
  .ppto-main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .ppto-top-lema { display: none; }
  .ppto-nav .ppto-btn { flex: 1; }
}

/* ---------------------------------------------------------
   Presupuestos recibidos · vista del cliente (diseño 9b)
--------------------------------------------------------- */
.cmp-body {
  margin: 0;
  background: var(--blanco);
}

.cmp-top {
  height: 68px;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--borde);
}
.cmp-brand {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--azul-oscuro);
}
.cmp-brand span { color: var(--azul); }
.cmp-brand:hover { color: var(--azul-oscuro); text-decoration: none; }
.cmp-ref {
  font: 500 12px "Geist Mono", ui-monospace, monospace;
  color: var(--texto-suave);
}

.cmp-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 3vw, 32px) 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cmp-cab {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
}
.cmp-cab-textos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cmp-cab h1 {
  margin: 0;
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--texto-fuerte);
  overflow-wrap: anywhere;
}
.cmp-cab-textos > span {
  font-size: 15px;
  color: var(--texto-suave);
}

/* Ordenar: Precio / Valoración / Más recientes */
.cmp-orden {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--azul-suave);
  border-radius: 12px;
}
.cmp-orden-opcion {
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
}
.cmp-orden-opcion:hover { color: var(--azul-oscuro); text-decoration: none; }
.cmp-orden-opcion.es-activa {
  background: var(--blanco);
  color: var(--azul-oscuro);
}

/* Botones de esta pantalla */
.cmp-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 14px "Geist", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
}
.cmp-btn:hover { text-decoration: none; }
.cmp-btn--azul { background: var(--azul-oscuro); color: var(--blanco); padding: 0 18px; }
.cmp-btn--azul:hover { background: var(--azul-hover); }
.cmp-btn--borde {
  border: 1.5px solid var(--borde-azul);
  background: var(--blanco);
  color: var(--azul-oscuro);
}
.cmp-btn--borde:hover { border-color: var(--azul-oscuro); color: var(--azul-oscuro); }
.cmp-btn--verde { background: #15803d; color: var(--blanco); }
.cmp-btn--verde:hover { color: var(--blanco); }
.cmp-btn--borde-verde {
  border: 1.5px solid #bbe5cc;
  background: var(--blanco);
  color: #14532d;
}
.cmp-btn--gris { background: var(--texto-tenue); color: var(--blanco); }
.cmp-btn--estado { cursor: default; padding: 0 18px; }

/* Aviso de "has elegido a…" */
.cmp-elegido {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px;
  background: #e7f6ee;
  border: 1px solid #bbe5cc;
  font-size: 15px;
  line-height: 1.5;
  color: #14532d;
}
.cmp-elegido a:not(.cmp-btn) { color: #14532d; font-weight: 700; text-decoration: underline; }
.cmp-elegido-botones { display: flex; gap: 8px; }
.cmp-elegido .cmp-btn { height: 42px; border-radius: 10px; padding: 0 16px; }

/* Cada presupuesto */
.cmp-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmp-ppto {
  border: 1.5px solid var(--borde);
  border-radius: 20px;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
}
.cmp-ppto.es-elegido { border-color: #15803d; background: #f3fbf6; }
.cmp-ppto.es-apagado { opacity: .55; }

.cmp-ppto-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  padding: 18px 18px 14px;
}

.cmp-ini {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--azul-oscuro);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmp-ppto-quien {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.cmp-ppto-nombre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cmp-ppto-nombre a,
.cmp-ppto-nombre > span:first-child {
  font-size: 17px;
  font-weight: 800;
  color: var(--texto-fuerte);
}
.cmp-ppto-nombre a:hover { color: var(--azul-oscuro); }
.cmp-chapa {
  padding: 3px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--azul-oscuro);
  font-size: 12px;
  font-weight: 700;
}
.cmp-ppto-meta {
  font-size: 14px;
  color: var(--texto-suave);
}

.cmp-ppto-precio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}
.cmp-ppto-precio strong {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--texto-fuerte);
}
.cmp-ppto-precio span {
  font-size: 13px;
  color: var(--texto-suave);
}

.cmp-ppto-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 18px 18px;
}
.cmp-ppto-acciones form { margin: 0; }

/* El desglose se abre con un checkbox escondido: funciona sin
   JavaScript y deja el botón junto a "Elegir este". */
.cmp-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.cmp-toggle:focus-visible ~ .cmp-ppto-acciones label {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}
.cmp-ocultar,
.cmp-toggle:checked ~ .cmp-ppto-acciones .cmp-ver { display: none; }
.cmp-toggle:checked ~ .cmp-ppto-acciones .cmp-ocultar { display: inline; }

.cmp-desglose-dentro {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 18px 18px;
}
.cmp-toggle:checked ~ .cmp-desglose-dentro { display: grid; }

.cmp-partidas {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--borde);
}
.cmp-partidas div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f3f7;
  font-size: 14px;
}
.cmp-partidas strong { color: var(--texto-fuerte); white-space: nowrap; }

.cmp-mensaje {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--gris-claro);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.cmp-mensaje-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--azul-oscuro);
}
.cmp-mensaje-validez {
  font-size: 13px;
  color: var(--texto-suave);
}

/* Notas al pie de la lista */
.cmp-espera {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1.5px dashed var(--borde-azul);
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-suave);
}
.cmp-nota {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* Lista de sus solicitudes */
.cmp-solicitud {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1.5px solid var(--borde);
  border-radius: 20px;
  color: var(--texto);
}
.cmp-solicitud:hover { border-color: var(--borde-azul); text-decoration: none; color: var(--texto); }
.cmp-solicitud-titulo {
  font-size: 17px;
  font-weight: 800;
  color: var(--texto-fuerte);
}
.cmp-solicitud-meta { font-size: 14px; color: var(--texto-suave); }
.cmp-solicitud-estado {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 12px;
  font-weight: 600;
}

/* Avisos de pantalla entera */
.cmp-aviso {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--borde);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cmp-aviso h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--texto-fuerte);
}
.cmp-aviso p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto-suave);
}
.cmp-aviso .ppto-btn { align-self: flex-start; }

/* En la pantalla de "solicitud enviada": el enlace privado */
.ppto-enlace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--azul-suave);
  font-size: 14px;
  line-height: 1.5;
  color: var(--azul-oscuro);
  text-align: left;
}
.ppto-enlace input {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--borde-azul);
  background: var(--blanco);
  font: 500 12px "Geist Mono", ui-monospace, monospace;
  color: var(--texto-fuerte);
}

@media (max-width: 560px) {
  .cmp-ppto-acciones > * { flex: 1; }
  .cmp-ppto-acciones .cmp-btn { width: 100%; }
}