/* Imagen "El rótulo": la web como el escaparate de la oficina.
   Colores de la marca: negro y rojo (el rojo del logo), con fondo blanco para leer bien.
   Titulares en letra de rótulo (Barlow Condensed, SIL OFL) y la puerta con el cartel
   colgante de Abierto/Cerrado, que dice de verdad si la oficina está abierta. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --rojo: #d73732;          /* el rojo del logo */
  --rojo-oscuro: #b02a26;
  --rojo-suave: #fbeeed;
  --rojo-claro: #f0716c;    /* iconos sobre negro */
  --negro: #141414;
  --tinta: #1a1a1a;
  --gris: #5c5c5c;
  --gris-claro: #b8b8b8;
  --linea: #e2e2e2;
  --fondo: #f3f3f3;
  --puerta: var(--negro);
  --puerta-marco: #2e2e2e;
  --metal: #a3a3a3;
  --noche: var(--negro);
  --noche-2: #0d0d0d;
  --noche-linea: rgba(255, 255, 255, 0.18);
  --radio-boton: 6px;
  --radio-tarjeta: 6px;
  --radio-grande: 8px;
  --titulares: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
}

.tema-rotulo h1,
.tema-rotulo h2 {
  font-family: var(--titulares);
  font-weight: 700;
  letter-spacing: 0;
}
.tema-rotulo .seccion h2 { font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem); line-height: 1; margin-bottom: 0.45em; }
.tema-rotulo .bloque h2,
.tema-rotulo .legal h2 { font-size: 1.85em; line-height: 1.05; }
.tema-rotulo .pedir__caja h2 { font-size: 1.65em; line-height: 1.05; }
.tema-rotulo .pie h2 { font-size: 1.45rem; line-height: 1.1; }

/* Cabecera negra con el logo original (blanco y rojo) */
.tema-rotulo .cabecera { background: var(--negro); color: #fff; }
.tema-rotulo .cabecera__menu a { color: #e6e6e6; }
.tema-rotulo .cabecera__menu a:hover { color: #fff; }

/* Franja de accidentes y averías, en rojo */
.tema-rotulo .urgencias { background: var(--rojo); }
.tema-rotulo .urgencias__boton { border-color: rgba(255, 255, 255, 0.7); }
.tema-rotulo .urgencias__boton .icono { color: #fff; }
.tema-rotulo .urgencias__boton:hover { background: var(--rojo-oscuro); border-color: #fff; }
.tema-rotulo .urgencias__boton[aria-current="page"] { background: #fff; color: var(--tinta); }
.tema-rotulo .urgencias__boton[aria-current="page"] .icono { color: var(--rojo); }

/* Portada */
.tema-rotulo .portada { background: #fff; color: var(--tinta); padding: 2rem 0 3rem; }
.tema-rotulo .portada h1 {
  max-width: 14ch;
  margin-bottom: 0.3em;
  text-wrap: balance;
  font-size: clamp(3.1rem, 2.1rem + 5.2vw, 5.75rem);
  line-height: 0.92;
  color: var(--negro);
}
.tema-rotulo .portada__lema { color: var(--gris); max-width: 32rem; font-size: 1.08em; }
@media (min-width: 56em) {
  .tema-rotulo .portada { padding: 3.5rem 0 4.5rem; }
  .tema-rotulo .portada__lema { font-size: 1.15em; }
  .tema-rotulo .portada__rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
}

/* La puerta de la oficina */
.tema-rotulo .rotulo {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 9.4rem 1.35rem 1.4rem 2.35rem;
  border: 10px solid var(--puerta-marco);
  border-bottom-width: 16px;
  border-radius: 4px;
  background: var(--puerta);
  color: #ececec;
  box-shadow: none;
}
/* tirador */
.tema-rotulo .rotulo::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 58%;
  width: 6px;
  height: 4.5rem;
  border-radius: 3px;
  background: var(--metal);
}
@media (min-width: 56em) {
  .tema-rotulo .rotulo { min-height: 34rem; }
  .tema-rotulo .rotulo__telefono { margin-top: auto; }
}

/* El cartel colgante */
.tema-rotulo .estado {
  position: absolute;
  top: 2.6rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 11.5rem;
  margin: 0;
  padding: 0.55rem 1.1rem 0.65rem;
  border-radius: 5px;
  background: #fff;
  color: var(--rojo-oscuro);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  transform: translateX(-50%) rotate(-3deg);
  transform-origin: 50% -1.9rem;
  animation: cartel 1.6s ease-out 0.3s both;
}
.tema-rotulo .estado[hidden] { display: none; }
.tema-rotulo .estado::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 6rem;
  height: 1.9rem;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 30'%3E%3Cpath d='M48 4L17 30M48 4l31 26' fill='none' stroke='%23d6d6d6' stroke-width='1.6'/%3E%3Ccircle cx='48' cy='4' r='3.4' fill='%23a3a3a3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: none;
  transform: translateX(-50%);
}
.tema-rotulo .estado--abierto { background: #fff; color: var(--negro); }
.tema-rotulo .estado--abierto::before { background-color: transparent; box-shadow: none; }
.tema-rotulo .estado__titulo {
  margin: 0;
  font-family: var(--titulares);
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tema-rotulo .estado__detalle { color: var(--tinta); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }

@keyframes cartel {
  0% { transform: translateX(-50%) rotate(-11deg); }
  35% { transform: translateX(-50%) rotate(4deg); }
  65% { transform: translateX(-50%) rotate(-5deg); }
  100% { transform: translateX(-50%) rotate(-3deg); }
}

/* Lo rotulado en el cristal */
.tema-rotulo .rotulo__titulo { font-family: var(--titulares); font-size: 1.6rem; line-height: 1; color: #fff; margin-bottom: 0.7rem; }
.tema-rotulo .horario dt { color: var(--gris-claro); }
.tema-rotulo .horario dd { color: #fff; }
.tema-rotulo .rotulo__direccion .icono { color: var(--rojo-claro); }
.tema-rotulo .rotulo__direccion a { color: #fff; }
.tema-rotulo .rotulo__telefono {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: var(--titulares);
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: 0.02em;
}
.tema-rotulo .rotulo__telefono .icono { color: var(--rojo-claro); width: 0.8em; height: 0.8em; }
.tema-rotulo .rotulo__telefono:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; }

/* Botones */
.tema-rotulo .boton--borde { border-color: var(--tinta); }

/* Seguros: como la lista de un escaparate */
.tema-rotulo .seguros__rejilla {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
@media (min-width: 48em) { .tema-rotulo .seguros__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; } }
.tema-rotulo .seguro {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
  min-height: 4.25rem;
  padding: 0.8rem 0.25rem;
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 1.05em;
}
.tema-rotulo .seguro .icono-seguro { width: 2rem; height: 2rem; color: var(--rojo); }
.tema-rotulo .seguro span { min-width: 0; -webkit-hyphens: manual; hyphens: manual; }
.tema-rotulo .grupo__titulo {
  margin: 0;
  padding-bottom: 0.45rem;
  border-bottom: 3px solid var(--negro);
  font-family: var(--titulares);
  font-size: 1.65rem;
  line-height: 1;
}
@media (min-width: 64em) { .tema-rotulo .grupo .seguros__rejilla { grid-template-columns: minmax(0, 1fr); } }
.tema-rotulo .seguro:hover { color: var(--rojo-oscuro); text-decoration: underline; text-underline-offset: 0.2em; }

/* Así trabajo */
.tema-rotulo .paso { border-top-color: var(--negro); }
.tema-rotulo .paso::before { font-family: var(--titulares); font-size: 3.4em; color: var(--rojo); }

/* Ficha de seguro */
.tema-rotulo .ficha__icono { border-radius: 6px; background: var(--fondo); color: var(--rojo); }
.tema-rotulo .ficha__cabecera h1 { font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem); line-height: 0.95; }

.tema-rotulo .pedir__caja,
.tema-rotulo .faq details { border-radius: 6px; }
.tema-rotulo .otros a { border-radius: 6px; }

/* Pie */
.tema-rotulo .pie { background: var(--negro); color: #d0d0d0; }
.tema-rotulo .pie__legal { color: var(--gris-claro); }