/* ============================================================
   Páginas interiores (bloque 4A).

   El prototipo aprobado solo tenía Home, así que estas piezas no existen en b3.css ni en
   b3-home.css (que se copian del prototipo y no se tocan). Aquí no se inventa ningún valor:
   todo sale de los tokens de B3 (tokens.css) y de sus mismas clases de botón, eyebrow,
   contenedor y titular.

   Interior más compacto que el Home a propósito: --b3-pg-section es menor que --b3-section.
   Sin animaciones nuevas: se reutilizan data-reveal y la máscara de B3, que ya respetan
   prefers-reduced-motion desde el CSS aprobado.
   ============================================================ */

/*
 * Ritmo vertical de las páginas interiores: 36 px en móvil y 60 px en escritorio.
 *
 * Antes eran 82 px a 1440, arriba y abajo de cada franja: 164 px entre un contenido y el
 * siguiente. En secciones con poco texto —los tres puntos de «What to expect», la columna del
 * formulario— eso se leía como hueco, no como respiro, y estiraba las páginas sin decir más.
 *
 * Es el mismo ritmo aprobado en la ficha de producto.
 */
.b3 {
  --b3-pg-section: 2.25rem;
  --b3-pg-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

@media (min-width: 768px) {
  .b3 {
    --b3-pg-section: 3.75rem;
  }
}

/* Fondos comunes a todas las secciones interiores */
.b3-pg-hero--blanco,
.b3-pg-sec--blanco,
.b3-pg-caps--blanco,
.b3-pg-contacto--blanco,
.b3-pg-proceso--blanco,
.b3-pg-form--blanco {
  background: var(--b3-warm-white);
  color: var(--b3-ink);
}

.b3-pg-hero--marfil,
.b3-pg-sec--marfil,
.b3-pg-caps--marfil,
.b3-pg-contacto--marfil,
.b3-pg-proceso--marfil,
.b3-pg-form--marfil {
  background: var(--b3-ivory);
  color: var(--b3-ink);
}

.b3-pg-hero--negro,
.b3-pg-sec--negro,
.b3-pg-caps--negro,
.b3-pg-contacto--negro,
.b3-pg-proceso--negro,
.b3-pg-form--negro {
  --b3-focus: var(--b3-focus-dark);
  background: var(--b3-black);
  color: var(--b3-on-night);
}

/* ---------- Migas de pan ---------- */
.b3-pg-migas {
  background: var(--b3-white);
  border-bottom: 1px solid var(--b3-line);
}

.b3-pg-migas__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75rem;
  padding-block: 0.75rem;
  font-size: var(--b3-fs-label);
  color: var(--b3-ink-muted);
}

.b3-pg-migas__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.b3-pg-migas__item + .b3-pg-migas__item::before {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  background: var(--b3-champagne);
  transform: rotate(45deg);
}

.b3-pg-migas__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--b3-ink-muted);
  text-decoration: none;
}

.b3-pg-migas__link:hover {
  color: var(--b3-champagne-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.b3-pg-migas__actual {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--b3-ink);
  font-weight: 600;
}

/* ---------- Hero interior ---------- */
.b3-pg-hero {
  padding-block: var(--b3-pg-section);
}

.b3-pg-hero__grid {
  display: grid;
  gap: var(--b3-pg-gap);
  align-items: center;
}

.b3-pg-hero--media .b3-pg-hero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.b3-pg-hero__title {
  margin-top: 1rem;
  max-width: 18ch;
}

.b3-pg-hero__text {
  max-width: 46ch;
  margin-top: 1.25rem;
  color: var(--b3-ink-muted);
}

.b3-pg-hero--negro .b3-pg-hero__text {
  color: var(--b3-on-night-muted);
}

.b3-pg-hero__actions,
.b3-pg-sec__actions,
.b3-pg-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/*
   Aviso bajo los botones: tiene que leerse, no competir. 15 px —uno por encima del mínimo de la
   escala—, color atenuado y el ancho de una línea de lectura, para que quede como una nota al pie
   del botón y no como un segundo párrafo de introducción.
*/
.b3-pg-hero__nota {
  max-width: 34rem;
  margin-top: 0.75rem;
  font-size: var(--b3-fs-small);
  line-height: 1.5;
  color: var(--b3-ink-muted);
}

.b3-pg-hero--negro .b3-pg-hero__nota {
  color: var(--b3-on-night-muted);
}

.b3-pg-hero__call,
.b3-pg-form__call {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin-top: 1.25rem;
  font-weight: 700;
  color: var(--b3-ink);
  text-decoration: none;
}

.b3-pg-hero__call .b3-icon,
.b3-pg-form__call .b3-icon {
  width: 20px;
  height: 20px;
  color: var(--b3-champagne-deep);
}

.b3-pg-hero__call:hover span,
.b3-pg-form__call:hover span {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.b3-pg-hero__media {
  margin: 0;
  overflow: hidden;
}

/*
 * El mismo `height: auto` que la imagen de sección, y por el mismo motivo.
 *
 * En escritorio el `max-height: 26rem` de más abajo ya recortaba el alto, así que el fallo no se
 * veía. En móvil no hay tope, y el `aspect-ratio: 16 / 9` que se añadió para compactar el hero
 * nunca llegó a aplicarse: ganaba el atributo `height` del HTML y la fotografía se pintaba a
 * 1067 px, ocupando una pantalla entera.
 */
.b3-pg-hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Sección de texto e imagen ---------- */
.b3-pg-sec {
  padding-block: var(--b3-pg-section);
}

.b3-pg-sec__grid {
  display: grid;
  gap: var(--b3-pg-gap);
  align-items: center;
}

.b3-pg-sec--derecha .b3-pg-sec__grid,
.b3-pg-sec--izquierda .b3-pg-sec__grid {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

/* La imagen a la izquierda: se reordena solo en pantallas anchas, nunca en móvil */
@media (min-width: 768px) {
  .b3-pg-sec--izquierda .b3-pg-sec__copy {
    order: 2;
  }

  .b3-pg-sec--izquierda .b3-pg-sec__media {
    order: 1;
  }
}

.b3-pg-sec--texto .b3-pg-sec__copy {
  max-width: 60ch;
}

.b3-pg-sec__copy .b3-h2 {
  margin-top: 0.75rem;
}

.b3-pg-sec__text {
  max-width: 62ch;
  margin-top: 1.25rem;
  color: var(--b3-ink-muted);
  line-height: 1.7;
}

.b3-pg-sec--negro .b3-pg-sec__text {
  color: var(--b3-on-night-muted);
}

.b3-pg-sec__list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.b3-pg-sec__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.6;
}

.b3-pg-sec__list .b3-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--b3-champagne-deep);
}

.b3-pg-sec--negro .b3-pg-sec__list .b3-icon {
  color: var(--b3-champagne);
}

.b3-pg-sec__media {
  margin: 0;
  overflow: hidden;
}

/*
 * El `height: auto` no es decorativo: sin él, nada de lo demás funciona.
 *
 * pkb3_img_tema() añade width y height al <img> para reservar el hueco antes de que llegue el
 * archivo, y eso está bien. Pero el atributo height se traduce en una altura EXPLÍCITA, y
 * `aspect-ratio` solo actúa cuando la otra dimensión es `auto`. Resultado: la regla de 4:3 se
 * calculaba pero no se aplicaba, y cada foto se pintaba a la altura literal de su atributo —1333,
 * 933, 1498 y 1050 px—, estirando la sección a casi mil píxeles.
 *
 * El `max-height` acota la columna más ancha: a 682 px, 4:3 daría 511 px de alto.
 */
.b3-pg-sec__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  object-fit: cover;
}

/* ---------- Lista de capacidades ---------- */
.b3-pg-caps {
  padding-block: var(--b3-pg-section);
}

.b3-pg-caps__head .b3-h2 {
  margin-top: 0.75rem;
}

.b3-pg-caps__head .b3-lead {
  max-width: 56ch;
  margin-top: 1rem;
}

.b3-pg-caps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.b3-pg-caps__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.b3-pg-caps__icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--b3-champagne-deep);
}

.b3-pg-caps--negro .b3-pg-caps__icon {
  color: var(--b3-champagne);
}

.b3-pg-caps__title {
  font-weight: 700;
  line-height: 1.4;
}

.b3-pg-caps__text {
  margin-top: 0.4rem;
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink-muted);
}

.b3-pg-caps--negro .b3-pg-caps__text {
  color: var(--b3-on-night-muted);
}

/* ---------- Proceso de un servicio ---------- */
.b3-pg-proceso {
  padding-block: var(--b3-pg-section);
}

.b3-pg-proceso__head .b3-h2 {
  margin-top: 0.75rem;
}

.b3-pg-proceso__head .b3-lead {
  max-width: 56ch;
  margin-top: 1rem;
}

.b3-pg-proceso__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}

.b3-pg-proceso__item {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--b3-line);
}

.b3-pg-proceso--negro .b3-pg-proceso__item {
  border-top-color: var(--b3-line-dark);
}

.b3-pg-proceso__num {
  font-family: var(--b3-display);
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--b3-champagne-deep);
}

.b3-pg-proceso--negro .b3-pg-proceso__num {
  color: var(--b3-champagne);
}

.b3-pg-proceso__title {
  font-family: var(--b3-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.b3-pg-proceso__text {
  margin-top: 0.5rem;
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink-muted);
}

.b3-pg-proceso--negro .b3-pg-proceso__text {
  color: var(--b3-on-night-muted);
}

.b3-pg-proceso__nota {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--b3-fs-small);
  color: var(--b3-ink-muted);
}

.b3-pg-proceso--negro .b3-pg-proceso__nota {
  color: var(--b3-on-night-muted);
}

/* ---------- CTA interior ---------- */
.b3-pg-cta {
  --b3-focus: var(--b3-focus-dark);
  padding-block: var(--b3-pg-section);
  background: var(--b3-black);
  color: var(--b3-on-night);
}

.b3-pg-cta__inner {
  max-width: 46rem;
}

.b3-pg-cta .b3-h2 {
  margin-top: 0.75rem;
}

.b3-pg-cta .b3-lead {
  max-width: 48ch;
  margin-top: 1rem;
  color: var(--b3-on-night-muted);
}

.b3-pg-cta__call {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin-top: 1.5rem;
  font-weight: 700;
  color: var(--b3-on-night);
  text-decoration: none;
}

.b3-pg-cta__call .b3-icon {
  width: 20px;
  height: 20px;
  color: var(--b3-champagne);
}

.b3-pg-cta__call:hover span {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------- Información de contacto ---------- */
.b3-pg-contacto {
  padding-block: var(--b3-pg-section);
}

.b3-pg-contacto__head .b3-h2 {
  margin-top: 0.75rem;
}

.b3-pg-contacto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.b3-pg-contacto__label {
  margin-bottom: 0.6rem;
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b3-champagne-deep);
}

.b3-pg-contacto--negro .b3-pg-contacto__label {
  color: var(--b3-champagne);
}

.b3-pg-contacto__link,
.b3-pg-contacto__direccion {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 44px;
  font-style: normal;
  line-height: 1.6;
  color: inherit;
  text-decoration: none;
}

.b3-pg-contacto__link .b3-icon,
.b3-pg-contacto__direccion .b3-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  color: var(--b3-champagne-deep);
}

.b3-pg-contacto--negro :is(.b3-pg-contacto__link, .b3-pg-contacto__direccion) .b3-icon {
  color: var(--b3-champagne);
}

.b3-pg-contacto__link:hover span {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.b3-pg-contacto__mapa {
  margin-top: 0.5rem;
}

.b3-pg-contacto__horario,
.b3-pg-contacto__licencias {
  display: grid;
  gap: 0.35rem;
  line-height: 1.6;
  color: var(--b3-ink-muted);
}

.b3-pg-contacto__licencias {
  font-size: var(--b3-fs-small);
}

.b3-pg-contacto--negro :is(.b3-pg-contacto__horario, .b3-pg-contacto__licencias) {
  color: var(--b3-on-night-muted);
}

/* ---------- Estado pendiente ---------- */
.b3-pg-pendiente {
  padding-block: var(--b3-pg-section);
  background: var(--b3-warm-white);
}

.b3-pg-pendiente__caja {
  max-width: 44rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--b3-white);
  border: 1px solid var(--b3-line);
  border-left: 3px solid var(--b3-champagne);
}

.b3-pg-pendiente__marca {
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b3-champagne-deep);
}

.b3-pg-pendiente__titulo {
  margin-top: 0.75rem;
  font-family: var(--b3-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.b3-pg-pendiente__texto {
  max-width: 56ch;
  margin-top: 0.85rem;
  line-height: 1.7;
  color: var(--b3-ink-muted);
}

.b3-pg-pendiente .b3-btn {
  margin-top: 1.5rem;
}

.b3-pg-pendiente__tel {
  margin-top: 0.75rem;
  font-weight: 700;
}

.b3-pg-pendiente__horario {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: var(--b3-fs-small);
  color: var(--b3-ink-muted);
}

.b3-pg-pendiente__nota {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--b3-line);
  font-size: var(--b3-fs-small);
  color: var(--b3-ink-muted);
}

/* ---------- Navegación relacionada ---------- */
.b3-pg-rel {
  padding-block: var(--b3-pg-section);
  background: var(--b3-ivory);
}

.b3-pg-rel__titulo {
  font-family: var(--b3-display);
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b3-champagne-deep);
}

.b3-pg-rel__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.b3-pg-rel__link {
  display: grid;
  gap: 0.35rem;
  height: 100%;
  padding: 1.25rem 1.4rem;
  background: var(--b3-white);
  border: 1px solid var(--b3-line);
  color: var(--b3-ink);
  text-decoration: none;
  transition: border-color 350ms var(--b3-ease), transform 350ms var(--b3-ease);
}

.b3-pg-rel__link:hover {
  border-color: var(--b3-champagne);
  transform: translateY(-2px);
}

.b3-pg-rel__name {
  font-family: var(--b3-display);
  font-size: 1.0625rem;
  font-weight: 600;
}

.b3-pg-rel__text {
  font-size: var(--b3-fs-small);
  line-height: 1.5;
  color: var(--b3-ink-muted);
}

.b3-pg-rel__link .b3-arrow {
  margin-top: 0.5rem;
  color: var(--b3-champagne-deep);
}

/* ---------- Índice de servicios ---------- */
.b3-pg-svc {
  padding-block: var(--b3-pg-section);
  background: var(--b3-warm-white);
}

.b3-pg-svc__head .b3-h2 {
  margin-top: 0.75rem;
}

.b3-pg-svc__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.b3-pg-svc__item {
  display: flex;
  flex-direction: column;
  background: var(--b3-white);
  border: 1px solid var(--b3-line);
}

.b3-pg-svc__media {
  overflow: hidden;
}

/*
   Tarjeta del índice de servicios.

   El `height: auto` es el mismo arreglo que necesitó About, y aquí el daño era mayor: sin él,
   `aspect-ratio` quedaba inerte y mandaba el atributo `height` del `<img>`, de modo que una
   miniatura de 301 px de ancho se pintaba de **800 px** de alto —y la de Watch Repair, que declara
   1600, de **1600 px**—. Seis tarjetas así convertían el índice en una columna de tiras verticales:
   `object-fit: cover` conservaba una franja estrecha de cada fotografía y tiraba el resto.

   Se conserva 16/10, que es la proporción con la que se aprobó esta rejilla: el defecto estaba en
   la altura, no en la forma. A 301 px de ancho son 188 px de alto, muy por debajo de cualquier tope.
*/
.b3-pg-svc__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.b3-pg-svc__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.35rem 1.4rem 1.5rem;
}

.b3-pg-svc__name {
  font-family: var(--b3-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.b3-pg-svc__text {
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink-muted);
}

.b3-pg-svc__body .b3-textlink {
  margin-top: auto;
  padding-top: 0.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Servicio sin fotografía propia: la tarjeta se compone igual de bien */
.b3-pg-svc__item--sin-foto .b3-pg-svc__body {
  padding-top: 1.5rem;
  border-top: 3px solid var(--b3-champagne);
}

.b3-pg-svc__nota,
.b3-pg-svc__vacio {
  margin-top: 1.5rem;
  font-size: var(--b3-fs-small);
  color: var(--b3-ink-muted);
}

/* ---------- Formulario demostrativo sobre fondo claro ----------
   El formulario de B3 vive sobre negro. Aquí se reutiliza su misma estructura y se ajustan
   solo los colores, con los tokens claros y contraste AA comprobado. */
.b3-pg-form {
  padding-block: var(--b3-pg-section);
}

.b3-pg-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--b3-pg-gap);
  align-items: start;
}

.b3-pg-form__copy .b3-h2 {
  margin-top: 0.75rem;
}

.b3-pg-form__copy .b3-lead {
  max-width: 42ch;
  margin-top: 1rem;
  color: var(--b3-ink-muted);
}

.b3-form--claro {
  background: var(--b3-white);
  border-color: var(--b3-line);
  color: var(--b3-ink);
  color-scheme: light;
}

.b3-form--claro .b3-field label {
  color: var(--b3-ink-muted);
}

.b3-form--claro .b3-field :is(input, select, textarea) {
  border-color: rgb(29 25 20 / 0.28);
  background: var(--b3-warm-white);
  color: var(--b3-ink);
}

.b3-form--claro .b3-field :is(input, select, textarea):hover {
  border-color: rgb(29 25 20 / 0.5);
}

.b3-form--claro .b3-field :is(input, select, textarea):focus {
  border-color: var(--b3-champagne-deep);
}

.b3-form--claro .b3-field option {
  background: var(--b3-white);
  color: var(--b3-ink);
}

.b3-form--claro .b3-form__aviso {
  background: rgb(205 178 134 / 0.22);
  border-left-color: var(--b3-champagne-deep);
  color: var(--b3-ink);
}

.b3-form--claro .b3-form__aviso a {
  color: var(--b3-champagne-deep);
}

.b3-form--claro .b3-form__resumen {
  background: rgb(143 43 32 / 0.08);
  border-left-color: #8f2b20;
  color: #8f2b20;
}

.b3-form--claro .b3-field__error {
  color: #8f2b20;
}

.b3-form--claro .b3-field :is(input, select, textarea)[aria-invalid='true'] {
  border-color: #8f2b20;
}

.b3-form--claro .b3-form__hint {
  color: var(--b3-ink-muted);
}

/* El textarea no existía en el prototipo: mismo trazo y mismas medidas que los demás campos */
.b3-field textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgb(244 239 231 / 0.3);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: inherit;
  resize: vertical;
  transition: border-color 350ms var(--b3-ease);
}

.b3-field__opcional {
  margin-left: 0.4rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

/* Adjuntos: solo un aviso. No hay campo de archivo ni subida posible. */
.b3-pg-form__adjuntos {
  padding: 1rem 1.1rem;
  background: var(--b3-ivory);
  border: 1px dashed rgb(29 25 20 / 0.25);
}

.b3-pg-form__adjuntos-titulo {
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b3-champagne-deep);
}

.b3-pg-form__adjuntos-texto {
  margin-top: 0.4rem;
  font-size: var(--b3-fs-small);
  line-height: 1.6;
  color: var(--b3-ink-muted);
}

/* ============================================================
   Adaptación a pantallas estrechas. Los mismos cortes que usa B3.
   ============================================================ */
@media (max-width: 1023px) {
  .b3-pg-hero--media .b3-pg-hero__grid,
  .b3-pg-sec--derecha .b3-pg-sec__grid,
  .b3-pg-sec--izquierda .b3-pg-sec__grid,
  .b3-pg-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .b3-pg-hero__title {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .b3-pg-hero__img,
  .b3-pg-sec__img {
    aspect-ratio: 3 / 2;
  }

  .b3-pg-sec__img {
    max-height: 340px;
  }

  .b3-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .b3-pg-migas__list {
    font-size: var(--b3-fs-label);
  }

  /* La barra de acciones de B3 es fija abajo en móvil: el pie no debe quedar debajo */
  .b3-pg-rel {
    padding-bottom: calc(var(--b3-pg-section) + 1rem);
  }
}

@media (max-width: 479px) {
  .b3-pg-hero__actions .b3-btn,
  .b3-pg-cta__actions .b3-btn,
  .b3-pg-sec__actions .b3-btn {
    width: 100%;
  }
}

/* ============================================================
   Emparejado de secciones interiores.

   El problema que resuelve: varios bloques de estas páginas ocupan una franja completa con una
   sola columna de contenido. El panel de «reserva pendiente» de Book y los datos de contacto
   dejaban dos tercios de la pantalla en blanco, y la página se estiraba sin decir más.

   Puestos en pareja, cada franja se llena y la página se acorta sin quitar nada. En móvil se
   apilan, que es lo único que cabe.
   ============================================================ */
.b3-pg-par {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1200px + var(--b3-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--b3-gutter);
  padding-block: 2.25rem;
}

/* Cada bloque trae su franja completa; dentro de la pareja sobra su aire y su fondo. */
.b3-pg-par > section {
  padding-block: 0;
  background: none;
}

.b3-pg-par > section > .b3-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* El panel de «pendiente» deja de ser una tarjeta suelta y ocupa su columna. */
.b3-pg-par .b3-pg-pendiente__caja {
  max-width: none;
}

@media (min-width: 768px) {
  .b3-pg-par {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
    padding-block: 3.75rem;
  }
}

/*
 * En Contact el formulario pide más ancho que la lista de datos, así que la pareja no va a
 * mitades: los campos necesitan sitio para escribir y los datos son líneas cortas.
 */
@media (min-width: 768px) {
  .b3-pg-par--contacto {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
}

/*
 * Dentro de la pareja, la rejilla de datos de contacto pasa a una sola columna: cuatro columnas
 * dentro de media pantalla dejaban los textos partidos en dos palabras por línea.
 */
.b3-pg-par .b3-pg-contacto__grid {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * Dentro de una pareja, el formulario va a una sola columna.
 *
 * El bloque reparte por su cuenta encabezado y campos en dos columnas. Metido a su vez en media
 * pantalla, la página se leía como tres columnas —datos, texto, campos— y los campos quedaban
 * estrechos. En pareja, el encabezado va encima de sus campos.
 */
.b3-pg-par .b3-pg-form__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/*
 * La fotografía del hero, algo menos alta en escritorio.
 *
 * Con proporción 4/3 dentro de una columna estrecha, la imagen llegaba a 620 px y empujaba el
 * resto de la página. Se limita el alto sin recortar: la fotografía sigue completa, solo ocupa
 * menos pantalla.
 */
@media (min-width: 768px) {
  .b3-pg-hero__img {
    max-height: 26rem;
  }
}

/* ============================================================
   Ajustes de revisión: aire, jerarquía y móvil.
   ============================================================ */

/*
 * La fotografía del hero, más baja en móvil.
 *
 * Con proporción 3/2 ocupaba casi media pantalla y empujaba el título y el teléfono por debajo
 * del pliegue, donde además los tapaba la barra fija de acciones. En panorámica se sigue viendo
 * entera —no se recorta— y deja sitio a lo que hay que leer primero.
 */
@media (max-width: 767px) {
  .b3-pg-hero__img {
    aspect-ratio: 16 / 9;
  }

  /* Y un poco de aire al final, para que la barra fija no se apoye sobre el contenido. */
  .b3-pg-hero {
    padding-bottom: calc(var(--b3-pg-section) + 3.5rem);
  }
}

/*
 * «What to expect» y las listas de capacidades, más compactas.
 *
 * Tres puntos cortos dentro de una franja completa dejaban una banda medio vacía. El texto no
 * cambia: se acerca al titular y los puntos se reparten con menos hueco entre ellos.
 */
.b3-pg-caps__head {
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.b3-pg-caps__list {
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * Los datos de contacto, presentados como fichas.
 *
 * Eran etiqueta y valor sueltos en una columna larga. Con un filete y algo de aire cada dato se
 * lee como una unidad —teléfono, correo, tienda, horario— y la columna deja de verse como una
 * lista descolgada. **No se añade ningún dato**: son los mismos que ya estaban confirmados.
 */
.b3-pg-par .b3-pg-contacto__dato {
  padding: 1rem 0 1rem 0;
  border-top: 1px solid var(--b3-line);
}

.b3-pg-par .b3-pg-contacto__dato:first-child {
  border-top: 0;
  padding-top: 0;
}

.b3-pg-par .b3-pg-contacto__grid {
  gap: 0;
}

/*
 * Las fotografías de sección, acotadas en móvil.
 *
 * Con proporción 3/2 en una sola columna, las dos fotografías de una página de servicio sumaban
 * casi 1900 px de desplazamiento: la página se alargaba por las imágenes, no por el contenido.
 *
 * Se limita el alto a 240 px y se recorta con «cover» desde el punto focal que ya declara cada
 * imagen, así que se sigue viendo lo que importa de la escena. Los atributos `width` y `height`
 * no cambian —la proporción declarada se mantiene y no hay desplazamiento de diseño—: lo que
 * cambia es el hueco donde se muestra.
 */
@media (max-width: 768px) {
  .b3-pg-sec__img {
    aspect-ratio: auto;
    height: 15rem;
    object-fit: cover;
  }
}

/*
 * El hero sin fotografía, de verdad compacto.
 *
 * Las medidas del título y del texto están pensadas para convivir con una imagen al lado: 18 y
 * 46 caracteres. Sin imagen, esa misma medida estrecha reparte el titular en muchas líneas y el
 * hero acaba **más alto** que uno con fotografía —577 px frente a 543—, además de dejar libre
 * toda la mitad derecha.
 *
 * Con la imagen ausente se ensancha la medida y se recorta el aire: el bloque ocupa lo que pide
 * su texto. Afecta a las cuatro páginas de servicio que todavía no tienen fotografía propia.
 */
.b3-pg-hero:not(.b3-pg-hero--media) {
  padding-block: calc(var(--b3-pg-section) * 0.75);
}

.b3-pg-hero:not(.b3-pg-hero--media) .b3-pg-hero__title {
  max-width: 26ch;
}

.b3-pg-hero:not(.b3-pg-hero--media) .b3-pg-hero__text {
  max-width: 62ch;
}