/* ---------------------------------------------------------------------------
   Componentes del design system v5 "Acero 3.1".
   Ningun hexadecimal aqui: solo variables semanticas y presets de theme.json.
   --------------------------------------------------------------------------- */

.eg-container { max-width: 1120px; margin-inline: auto; }
@media (max-width: 900px) { .eg-container { padding-inline: 20px; } }

/* ---------------------------------------------------------------------------
   El borde del contenido, para las barras del marco.

   Las tres barras -titulo, menus y estado- van a sangre: son el marco de la
   ventana, no documento. Pero lo que llevan DENTRO tiene que arrancar donde
   arranca el texto, que es lo que pidio el usuario el 2026-09-15: "los botones
   de arriba, el menu, y los items del footer que respeten el ancho maximo del
   contenido".

   Esto contradice al kit a proposito. layout.css pone la barra de menus a ras
   (`padding: 0 var(--eg-s2)`), y el 14/09 lo implemente asi por fidelidad. El
   usuario pide lo contrario y manda el usuario; queda escrito para que nadie
   lo "arregle" de vuelta creyendo que se desvio del diseño.

   La formula no se deduce, se midio: el borde izquierdo del <h1> esta en 160,
   40, 20, 20 y 20 a 1440, 1200, 1160, 1024 y 375. O sea que por encima de 1160
   manda el centrado del contenedor de 1120 y por debajo, un margen de 20.

   Va en % y no en vw a proposito: 100vw incluye la barra de desplazamiento y
   dejaria el marco unos 15px descuadrado respecto al contenido en cualquier
   pantalla con scroll. El porcentaje se resuelve contra el ancho del bloque,
   que es el mismo que usa el contenedor. */
:root { --eg-frame-inset: max(20px, (100% - 1120px) / 2); }

/* --- Banda de senalizacion. Maximo una por pantalla: cierre de pagina y 404. */
.eg-hazard {
  height: 16px;
  background: repeating-linear-gradient(
    -45deg,
    var(--wp--preset--color--amber) 0 14px,
    var(--wp--preset--color--ink-900) 14px 28px
  );
}

/* --- Etiqueta mono: specs, credits, labels. */
.eg-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--eg-text-mute);
}

.eg-kicker { color: var(--eg-accent-text); letter-spacing: 0.14em; }

/* --- Ficha tecnica. El componente central: una atraccion y un proyecto
       comparten markup y solo cambian las etiquetas. */
.eg-spec-sheet {
  background: var(--eg-chrome);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out), var(--eg-shadow);
  padding: 16px;
}

/* Las filas de datos van HUNDIDAS dentro de la ficha: el dato es algo que se
   consulta, no algo que se pulsa, y el hueco lo dice sin una sola etiqueta. */
.eg-spec-sheet__rows {
  background: var(--eg-field);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-sunk);
  padding: 6px 8px;
}
.eg-spec-sheet__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;   /* data.css .eg-spec__title */
  margin: 0 0 12px;
  color: var(--eg-text);
}
/* Rejilla de tres columnas, como en el kit (data.css .eg-spec__row): etiqueta
   fija de 88px, valor, y el punto en su propia celda pegado a la derecha. Antes
   era un flex y el punto iba DENTRO del valor: cuando "Rocky Mountain
   Construction" envolvia a dos lineas, el punto se quedaba colgando al final de
   la segunda, a media caja. Y el filete punteado entre filas, que el kit pone y
   aqui faltaba. */
.eg-spec-sheet__row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--eg-border);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--data);
  line-height: 1.4;
  color: var(--eg-text);
}
.eg-spec-sheet__row:last-child { border-bottom: 0; }
.eg-spec-sheet__key {
  color: var(--eg-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.eg-spec-sheet__value { min-width: 0; }
.eg-spec-sheet__dot { justify-self: end; }

/* Hueco: cuando no hay dato, se ve que no lo hay. Nunca se rellena adivinando. */
.eg-spec-sheet__value--empty { color: var(--eg-text-mute); }

/* --- Punto de trazabilidad. Verde: dos o mas fuentes. Ambar: una. Rojo: ninguna. */
/* Una forma de 6px, no un glifo. El kit (core.css .eg-dot) lo dibuja asi, y con
   el glifo el tamaño dependia de la fuente mono y de su interlineado: salia de
   7 u 8px segun donde estuviera. El color sigue viniendo de la clase de estado
   y se aplica como fondo via currentColor, asi que las tres reglas de abajo no
   cambian. El !important en el radio es porque modes.css pone radio 0 a todo con
   !important -"Radio 0. Siempre."-, y esta es la unica excepcion del sistema:
   el punto de trazabilidad es redondo en el kit y en el tema. */
.eg-trace {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 999px !important;
  vertical-align: middle;
  background: currentColor;
}
.eg-trace--verified   { color: var(--eg-trace-verified); }
.eg-trace--attributed { color: var(--eg-trace-attributed); }
.eg-trace--unsourced  { color: var(--eg-trace-unsourced); }

/* --- Plancha de dato. El numero sale siempre de un count(). */
.eg-data-plate__number {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--eg-accent-text);
}
.eg-data-plate__label { margin-top: 6px; }

/* --- Perfil de via. Separador y barra de progreso de lectura. */
.eg-track-profile { display: block; width: 100%; height: 46px; }
.eg-track-profile__bed      { stroke: var(--eg-border); stroke-width: 2; fill: none; }
.eg-track-profile__progress { stroke: var(--wp--preset--color--amber); stroke-width: 2; fill: none; }
.eg-track-profile__head     { fill: var(--wp--preset--color--amber); }

/* --- Botones y tarjetas — v5 "Acero 3.1".

   v4 movia las cosas al pasar por encima: `translate(-2px,-2px)` en 100ms, y en
   claro el desplazamiento revelaba la sombra dura. v5 retira ese lenguaje
   entero. Un boton biselado no se desplaza al acercar el raton: se HUNDE al
   pulsarlo. El bisel saliente pasa a bisel pulsado y el relleno se corre un
   pixel, que es lo que hace que el dedo note que ha pasado algo.

   Consecuencia practica, y es una mejora: el estado pulsado existe en tactil y
   con teclado. El hover no existia en ninguno de los dos. */
.eg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  padding: 11px 18px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 13px;
  /* Fija, y no la heredada: un <button> hereda `line-height: normal` del
     navegador y un <a> hereda la del sitio. Con la misma clase y el mismo
     texto, uno media 44 y el otro 45. Un pixel no se ve; dos piezas del
     mismo sistema que no miden lo mismo se ven en cuanto se ponen una al
     lado de la otra, que es lo que pasa en el bloque de compartir. */
  line-height: 1.2;
  text-decoration: none;
  background: var(--eg-chrome);
  color: var(--eg-text);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out);
  cursor: pointer;
}
.eg-btn:hover { color: var(--eg-text); }

/* El desplazamiento del relleno es asimetrico a proposito: el contenido se va
   hacia abajo-derecha, que es hacia donde se hunde la pieza. Con un relleno
   simetrico el boton parpadea en vez de hundirse. */
.eg-btn:active,
.eg-btn[aria-pressed="true"] {
  box-shadow: var(--eg-bevel-in);
  padding: 12px 17px 10px 19px;
}

/* Marco de 2px, como pide core.css .eg-btn--primary, y el relleno un pixel
   menor para que el boton mida lo mismo que el secundario. Heredaba el marco de
   1px del boton base y el primario se veia mas fino que su vecino. */
.eg-btn--primary {
  background: var(--eg-accent);
  color: var(--eg-on-accent);
  border: 2px solid var(--eg-frame);
  padding: 10px 17px;
}
.eg-btn--primary:hover { color: var(--eg-on-accent); }
.eg-btn--primary:active { padding: 11px 16px 9px 18px; }

/* Sobre grafito el marco del boton primario es del color del fondo, asi que sin
   este anillo el ambar flota sin contorno. En claro no hace falta: el marco ya
   es del color del texto. */
:root:not([data-theme="light"]) .eg-btn--primary {
  border-color: var(--wp--preset--color--ink-900);
  box-shadow: var(--eg-bevel-out), 0 0 0 1px var(--eg-accent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .eg-btn--primary {
    border-color: var(--eg-frame);
    box-shadow: var(--eg-bevel-out);
  }
}

.eg-btn--secondary {
  background: var(--eg-chrome);
  color: var(--eg-text);
}

/* El foco punteado de 1992, solo dentro de los controles biselados: el bisel ya
   delimita la pieza, asi que el punteado se lee sin competir con el marco. Como
   regla general del documento sigue mandando el violeta de 2px de modes.css. */
.eg-btn:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -5px;
}

.eg-card {
  border: var(--eg-border-width) solid var(--eg-frame);
  padding: 14px;
  background: var(--eg-chrome);
  box-shadow: var(--eg-bevel-out), var(--eg-shadow);
}
.eg-card--interactive { cursor: pointer; }
.eg-card--interactive:active { box-shadow: var(--eg-bevel-in), var(--eg-shadow); }

/* --- Hueco de imagen. Si no hay foto propia, va el hueco: nunca stock. */

/* --- Conmutador de tema.

   El objetivo tactil y la caja con borde eran la MISMA caja: con
   min-height: 44px, el boton medía exactamente lo que mide la cabecera, asi que
   su borde chocaba con el filete inferior y dejaba una franja de 2px. Parecia
   una pestaña pegada al borde de la pagina, no un boton. En movil era mas
   evidente todavia: una caja de 44px al lado de un icono de menu de 24.

   Se separan las dos cosas. La caja visible mide lo que tiene que medir -26px,
   como un control pequeño- y el area pulsable la estira un pseudoelemento hasta
   los 44px del encargo. Se puede pulsar igual de bien y ya no domina. */
.eg-theme-toggle {
  position: relative;
  background: var(--eg-chrome);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out);
  color: var(--eg-text-dim);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

/* El conmutador lleva SUS DOS etiquetas dentro y CSS enseña la que toca.

   El usuario pidio dos estados visibles pero que al entrar mande el sistema.
   Eso no lo puede resolver el servidor: no sabe que prefiere el sistema de
   quien visita, asi que cualquier etiqueta que imprima sera la equivocada la
   mitad de las veces, y corregirla con JavaScript despues de pintar es un
   parpadeo garantizado.

   Lo resuelve CSS, que SI sabe en que tema esta pintando. Y funciona tambien
   para quien no ve la pantalla: `display: none` saca el texto del arbol de
   accesibilidad, asi que un lector de pantalla encuentra una sola etiqueta
   dentro del boton, y es la correcta. Sin aria-label, sin JavaScript. */
/* La etiqueta dice A DONDE se va, no donde se esta: en grafito el boton ofrece
   "Papel". Es la regla de "copy de interfaz literal": el boton dice lo que
   hace. */
.eg-theme-toggle__a-papel { display: inline; }
.eg-theme-toggle__a-grafito { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .eg-theme-toggle__a-papel { display: none; }
  :root:not([data-theme="dark"]) .eg-theme-toggle__a-grafito { display: inline; }
}
:root[data-theme="light"] .eg-theme-toggle__a-papel { display: none; }
:root[data-theme="light"] .eg-theme-toggle__a-grafito { display: inline; }
:root[data-theme="dark"] .eg-theme-toggle__a-papel { display: inline; }
:root[data-theme="dark"] .eg-theme-toggle__a-grafito { display: none; }

/* 26px de caja + 9 arriba + 9 abajo = los 44 de objetivo tactil, sin que se
   vean. Va detras del texto para no taparlo al pulsar. */
.eg-theme-toggle::after {
  content: '';
  position: absolute;
  inset: -10px -6px;
}

/* Que no se lea como un elemento mas del menu. Estaba a 20px de CONTACTO, que
   es la misma separacion que hay entre dos items del menu, asi que parecia uno
   de ellos con caja.

   Va con `.eg-header` delante y no a secas: el CSS de layout del nucleo emite
   `.wp-block-group-is-layout-flex > * { margin: 0 }`, que tiene la MISMA
   especificidad que `.eg-theme-switch` y se carga despues, asi que ganaba el.
   Es la misma trampa que el !important del layout constrained: el nucleo pisa
   lo que escribes y no avisa. */
.eg-header .eg-theme-switch { margin-left: 14px; }

/* --- Filas de ranking de /coasters/. */
.eg-ranking__tabs { display: flex; gap: 0; margin-bottom: 16px; }
/* Las pestañas son un grupo de botones: la seleccionada no cambia de color, se
   queda PULSADA. Es la misma gramatica que el resto de la interfaz, y ademas
   arregla un problema real de v4: la pestaña activa iba en ambar macizo, que es
   el mismo tratamiento que el boton primario, asi que competia con el. */
.eg-ranking__tab {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  background: var(--eg-chrome);
  border: var(--eg-border-width) solid var(--eg-frame);
  border-right-width: 0;
  box-shadow: var(--eg-bevel-out);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--eg-text-dim);
  text-decoration: none;
}
.eg-ranking__tab:last-child { border-right-width: var(--eg-border-width); }
.eg-ranking__tab.is-active {
  background: var(--eg-surface-3);
  color: var(--eg-text);
  box-shadow: var(--eg-bevel-in);
}
.eg-ranking__tab:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -5px;
}

.eg-ranking__list { list-style: none; margin: 0; padding: 0; }
/* Flex y no grid, a proposito.
   Con `grid-template-columns: 34px 58px 1fr auto` las cuatro columnas eran
   fijas y la posicion de cada hijo dependia de su orden en el marcado. En
   cuanto la miniatura dejo de pintarse -no hay ni una foto todavia- el cuerpo
   caia en la columna de 58px y cada titulo se partia en vertical, letra a
   letra. Con flex, un hijo que no esta simplemente no ocupa: la fila se
   recompone sola tanto si hay foto como si no. */
/* `.eg-term-list > li` entra en el MISMO conjunto de declaraciones, no en una
   copia. Las paginas de parque y de fabricante listan con el bucle de consulta
   de core -son plantillas que se editan desde el Editor de sitios, y su listado
   tenia que poder editarse tambien-, y core pone su propia clase en cada <li>:
   no hay forma de que el marcado traiga `.eg-ranking__row`. Ampliar el selector
   dice que es la misma fila; duplicar las declaraciones habria creado dos filas
   que un dia dejan de parecerse. */
.eg-ranking__row,
.eg-term-list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--eg-hairline);
}
.eg-ranking__row > .eg-ranking__index { flex: 0 0 34px; }
.eg-ranking__row > .eg-ranking__body,
.eg-term-list > li > .eg-ranking__body { flex: 1 1 auto; min-width: 0; }
/* El punto se va al margen derecho pase lo que pase delante. */
.eg-ranking__row > .eg-trace { flex: 0 0 auto; margin-left: auto; }
/* Peso 900 y alineado a la derecha, como data.css .eg-rank__index: asi el "1" y
   el "10" terminan en la misma vertical y los nombres arrancan alineados. Con
   el cero a la izquierda que llevaba antes ("01") no hacia falta, pero el kit
   numera 1..10 sin relleno. */
.eg-ranking__index {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 900;
  font-size: 22px;
  text-align: right;
  color: var(--eg-text-mute);
}
.eg-ranking__row:first-child .eg-ranking__index { color: var(--eg-accent-text); }
.eg-ranking__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* En versales, como todo titulo de tarjeta o fila en el kit (--eg-title-s va
   siempre con text-transform: uppercase en data.css y layout.css). El sitio los
   pintaba en caja normal en las cinco pantallas: era la diferencia mas visible
   entre el kit renderizado y staging. */
/* El segundo selector es para el titulo que pinta core: `wp:post-title` deja la
   clase en el <h3> y el enlace va dentro, mientras que la fila del ranking la
   lleva el propio <a>. Mismo componente, dos sitios donde cae la clase. */
.eg-ranking__name,
h3.eg-ranking__name a {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--eg-text);
  text-decoration: none;
}
.eg-ranking__data { font-size: 9px; }
/* El <h3> que pinta core trae los margenes de un encabezado; dentro de una fila
   de lista no son margenes, son un salto. */
h3.eg-ranking__name { margin: 0; }
.eg-term-list > li > .eg-ranking__body > * { margin: 0; }

/* --- Rejilla de credits. */
.eg-credit-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.eg-credit-grid__link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.eg-credit-grid__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--eg-text);
  text-transform: uppercase;
}
.eg-credit-grid__park { font-size: 9px; }
@media (max-width: 900px) { .eg-credit-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Panel ESTADO. */
.eg-status__head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.eg-status__list { list-style: none; margin: 0; padding: 0; }
.eg-status__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--eg-hairline);
  font-family: var(--wp--preset--font-family--mono); font-size: 11px;
  /* Versales tambien en el valor: data.css .eg-status__row lleva uppercase en
     toda la fila. Aqui solo la etiqueta iba en versales -por la clase
     eg-label- y los valores en caja normal. */
  text-transform: uppercase; letter-spacing: 0.10em;
}
.eg-status__what { color: var(--eg-text-dim); }

/* --- Formulario de encargo. */
.eg-enquiry__step { margin-bottom: 16px; }
.eg-enquiry__step legend { padding: 0; }
.eg-enquiry fieldset { border: 0; margin: 0 0 16px; padding: 0; }
.eg-enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .eg-enquiry__row { grid-template-columns: 1fr; } }

.eg-enquiry textarea,
.eg-enquiry input[type="text"],
.eg-enquiry input[type="email"] {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  /* Hundido, no elevado: en v5 un campo es un hueco en la superficie, y esa es
     toda la senal de "aqui se escribe". Antes era una caja elevada con borde,
     que es exactamente el tratamiento de un boton. */
  background: var(--eg-field);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-sunk);
  color: var(--eg-text);
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
}
.eg-enquiry textarea { min-height: 92px; resize: vertical; }

.eg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* La chip del kit (core.css .eg-chip) NO es una caja: es una casilla de
   verificacion de 1992. Una etiqueta plana y, delante, un cuadrado hundido de
   14px que se marca con una equis; el redondo, para las de una sola opcion.
   Aqui eran cajas biseladas enteras, como botones, y cinco botones marcados
   competian con el unico boton de verdad de la pantalla.

   El input nativo se queda -es lo que recibe el foco y lo que anuncia el lector
   de pantalla- pero fuera de la vista: no display:none, que lo sacaria del
   orden de tabulacion. */
.eg-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 2px;
  min-height: 44px;                      /* objetivo tactil, se mantiene */
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-text-dim);
  cursor: pointer;
}
.eg-chip::before {
  content: "";
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex: none;
  background: var(--eg-field);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-sunk);
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700; font-size: 12px; line-height: 1;
  color: var(--eg-text);
}
/* Redondo para las de una sola opcion. El !important es por el radio 0 global
   de modes.css; es la misma excepcion que el punto de trazabilidad. */
.eg-chip:has(input[type="radio"])::before { border-radius: 999px !important; }
.eg-chip:hover { color: var(--eg-text); }
.eg-chip:has(input:checked) { color: var(--eg-text); }
.eg-chip:has(input:checked)::before { content: "×"; }
.eg-chip:has(input[type="radio"]:checked)::before { content: "●"; font-size: 8px; }
.eg-chip:has(input:focus-visible) {
  outline: 2px solid var(--eg-link);
  outline-offset: 2px;
}
.eg-chip input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* El rojo de TEXTO, no el del punto. Al meter el formulario dentro de una
   ventana, el fondo de este mensaje dejo de ser ink-900 y paso a ser el chrome:
   el mismo rojo cayo de 4.90:1 a 4.4974:1, tres milesimas por debajo de AA. No
   se ve a ojo y lo caza la formula, que es justo para lo que esta la formula. */
.eg-enquiry__error {
  margin: 6px 0 0;
  min-height: 1em;
  color: var(--eg-error-text);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
}
.eg-enquiry__submit { width: 100%; margin-top: 8px; }
/* La nota va en minuscula: es una aclaracion, no una etiqueta de dato. En
   mayusculas con tracking parecia un aviso legal y competia con el boton. */
.eg-enquiry__note {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--eg-text-mute);
}

/* El honeypot sale de pantalla en vez de display:none: un bot que lea el CSS
   lo detecta menos, y un lector de pantalla no lo anuncia por el aria-hidden. */
.eg-enquiry__trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.eg-enquiry--sent {
  border: var(--eg-border-width) solid var(--eg-border);
  background: var(--eg-surface-elevated);
  padding: 20px;
}
.eg-enquiry__confirm-title {
  margin: 0 0 6px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 900; font-size: 24px; color: var(--eg-text);
}
.eg-enquiry__confirm-body { margin: 0; color: var(--eg-text-dim); font-size: 14px; }

/* --- Hero. */
.eg-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* --- Rejilla de servicios de la portada. */
.eg-services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 900px) { .eg-services__grid { grid-template-columns: 1fr; } }
/* .eg-service ya no es una rejilla de dos columnas: la etiqueta de formato que
   ocupaba la segunda subio a la barra de titulo de la ventana. Lo que queda es
   una ventana normal, asi que aqui no se declara display -si se declarase
   `grid`, ganaria al `flex` de .eg-window y la barra de titulo se colocaria
   como una celda mas-. */
.eg-services__grid > .eg-service { height: 100%; }
.eg-service__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--eg-text);
  text-transform: uppercase;   /* layout.css .eg-card__title */
}
/* baseline, no start: con "start" la etiqueta se pegaba al techo de la celda y
   quedaba 20px por encima del titulo al que acompaña. Alineadas por linea base
   se leen como lo que son, dos partes de un mismo renglon. */
.eg-service__format { align-self: baseline; text-align: right; font-size: 9px; }
.eg-service__desc {
  grid-column: 1 / -1; margin: 0;
  font-size: 12px; line-height: 1.5; color: var(--eg-text-dim);
}

/* --- Filas de /servicios/. Sin filete arriba: el kit las mete en un contenedor
       normal (Servicios.jsx) y la primera fila, la destacada, ya trae su marco. */
/* Rejilla sobre hermanos planos, sin div envolvente: asi el pattern son bloques
   de verdad -titulo, etiqueta y descripcion- que se pueden editar desde el
   editor, en vez de un bloque de HTML incrustado que solo se toca en el codigo.
   La maquetacion la pone la rejilla, no la estructura del marcado. */
.eg-service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--eg-hairline);
}
/* El destacado esta bien pensado y mal rematado: el relleno horizontal metia
   su texto 16px hacia dentro, asi que la primera fila rompia el borde izquierdo
   que comparten las otras cuatro. No se leia como "destacada", se leia como un
   fallo de maquetacion. Con el margen negativo el fondo sobresale y el texto se
   queda en la rejilla, que es como se hace un destacado sangrado. */
/* La fila destacada es una pieza saliente, no solo un fondo: marco y bisel,
   como layout.css .eg-service--pushed. El bisel es inset, asi que el margen
   negativo que la saca a sangre no lo recorta. */
.eg-service-row--pushed {
  background: var(--eg-chrome);
  padding-inline: 16px;
  margin-inline: -16px;
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out);
}
.eg-service-row__title  { grid-column: 1; grid-row: 1; }
.eg-service-row__format { grid-column: 2; grid-row: 1; align-self: baseline; text-align: right; }
.eg-service-row__desc   { grid-column: 1 / -1; grid-row: 2; }
.eg-service-row__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 19px; line-height: 1.15; color: var(--eg-text);
  text-transform: uppercase;   /* layout.css .eg-service__title */
}
.eg-service-row__format { flex: 0 0 auto; font-size: 9px; }
.eg-service-row__desc { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--eg-text-dim); }

/* --- Banda de CTA. */
/* La banda de CTA es ahora una VENTANA, asi que no puede seguir siendo un flex
   horizontal: ese `display: flex` se lo comia el .eg-window y dejaba la barra
   de titulo encogida y centrada en mitad de una caja de 1120px, con el texto
   tambien centrado. El borde y el relleno tambien sobran: los pone la ventana.

   Se queda solo lo que sigue siendo suyo: la anchura. Un cuadro de dialogo que
   ocupa todo el ancho de la pagina no se lee como un cuadro de dialogo. */
.eg-cta {
  max-width: 520px;
  margin-top: 28px;
}
.eg-cta__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 900; font-size: 24px; color: var(--eg-text);
}
.eg-cta__body { margin: 4px 0 0; font-size: 13px; color: var(--eg-text-dim); }

/* --- Lo que no hago. Cualifica tanto como el formulario. */
.eg-nope { margin-top: 28px; }   /* sin filete: el kit solo separa con aire */
.eg-nope__label { color: var(--eg-error-text); }
.eg-nope__body { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--eg-text-dim); }

/* --- Listado de blog. Borde izquierdo de 2px, violeta la destacada. */
.eg-blog-list { list-style: none; margin: 0; padding: 0; }
.eg-blog-list > li {
  border-left: 2px solid var(--eg-border);
  padding: 8px 0 8px 14px;
  margin-bottom: 14px;
}
.eg-blog-list > li:first-child { border-left-color: var(--eg-link); }

/* Los titulos de las entradas en color de texto, no en violeta de enlace: en
   el kit (Home.jsx) el unico acento de la ventana del blog es el filete
   izquierdo de la entrada destacada. Tres titulos en violeta eran tres
   acentos y ninguno destacaba. Siguen siendo enlaces: se subrayan al pasar. */
.eg-blog-list .wp-block-post-title,
.eg-blog-list .wp-block-post-title a { color: var(--eg-text); text-decoration: none; }
.eg-blog-list .wp-block-post-title a:hover,
.eg-blog-list .wp-block-post-title a:focus-visible { color: var(--eg-text); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   El blog.

   "El blog se ve cutre", 2026-09-15. Y lo estaba: una fila de titulos con un
   filete de 2px a la izquierda, sin fecha, sin categoria, sin paginas
   numeradas y sin nada del sistema de ventanas que sostiene el resto del
   sitio. Al lado de la portada parecia otra web.

   El kit de Claude Design NO trae pantalla de blog, asi que este diseño es
   propio. Para que no se inventase un lenguaje nuevo se compone entero con
   piezas que el kit ya define: la tarjeta biselada de .eg-card, la etiqueta
   mono de .eg-label, el kicker ambar, la etiqueta de seccion y los paneles
   hundidos de la barra de estado. Ni un token nuevo, ni un color nuevo.
   --------------------------------------------------------------------------- */

/* --- Cabecera de pagina: kicker, titular y una linea que dice de que va.
       La misma figura que el hero de portada, que es lo que hace que /blog/,
       un archivo de categoria y una entrada se lean como el mismo sitio. */
.eg-page-head > * { margin-block: 0; }
.eg-page-head .eg-kicker { margin-bottom: 12px; }
.eg-page-head > h1 + p,
.eg-page-head > h1 + .eg-dim { margin-top: 14px; }
/* La entradilla se para antes que el titular: 58 caracteres frente a los 68 del
   cuerpo, porque debajo de un display de 56px una linea larga se lee como parte
   del titular. */
.eg-page-head > p { max-width: 58ch; }

/* --- Cada entrada es una tarjeta del sistema.

       Rejilla de dos columnas desde 720px y la PRIMERA ocupa las dos, con el
       filete ambar arriba: es la unica jerarquia del listado y sustituye al
       filete violeta que marcaba la destacada en la lista antigua. Las tarjetas
       de una misma fila se estiran a la mas alta, asi que la entradilla se
       recorta en la plantilla (32 palabras) y no aqui. */
.eg-blog-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) {
  .eg-blog-entries { grid-template-columns: 1fr 1fr; }
  .eg-blog-entries > li:first-child { grid-column: 1 / -1; }
}
.eg-blog-entries > li {
  position: relative;          /* la capa que hace clicable la tarjeta */
  display: flex;
  flex-direction: column;
  border: var(--eg-border-width) solid var(--eg-frame);
  padding: 16px 18px 18px;
  background: var(--eg-chrome);
  box-shadow: var(--eg-bevel-out), var(--eg-shadow);
}
.eg-blog-entries > li:first-child { border-top: 2px solid var(--eg-accent-text); }

/* Fecha y categoria arriba, en mono. La fecha es texto y la categoria enlace:
   no se distinguen por color -eso pondria dos acentos en cada tarjeta- sino
   porque una se subraya al pasar por encima. */
.eg-blog-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 10px;
}
.eg-blog-entry__meta > * { margin: 0; }
.eg-blog-entry__cats a {
  /* Por ENCIMA de la capa de la tarjeta: si quedaran debajo se verian como
     enlaces y todos llevarian a la entrada. */
  position: relative;
  z-index: 1;
  color: var(--eg-text-dim);
  text-decoration: none;
}
.eg-blog-entry__cats a:hover,
.eg-blog-entry__cats a:focus-visible { color: var(--eg-text); text-decoration: underline; }

.eg-blog-entry__title { margin: 0; }
.eg-blog-entry__title a { color: var(--eg-text); text-decoration: none; }
/* Toda la tarjeta es el enlace, con un solo <a>: un segundo enlace al mismo
   sitio obliga a tabular dos veces por entrada para nada. La tecnica es la
   misma que en el menu y en el conmutador. */
.eg-blog-entry__title a::after { content: ""; position: absolute; inset: 0; }
.eg-blog-entries > li:hover .eg-blog-entry__title a { text-decoration: underline; }
.eg-blog-entries > li:has(a:focus-visible) { outline: var(--eg-focus-ring); outline-offset: 2px; }
.eg-blog-entries > li:active { box-shadow: var(--eg-bevel-in), var(--eg-shadow); }

/* La foto sangra hasta el borde de la tarjeta y se hunde en el marco, como el
   hueco de foto: cancela el relleno del <li> con margenes negativos en vez de
   quitarselo, que es lo que mantiene el texto alineado con el resto. */
.eg-blog-entry__media {
  margin: -16px -18px 14px;
  border-bottom: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-sunk);
}
.eg-blog-entry__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La destacada -la primera, la que ocupa las dos columnas- se parte en dos: la
   foto a la izquierda de lado a lado de la tarjeta y el texto a la derecha. A
   todo el ancho, una foto 16:9 de 1120px se comia la pantalla entera.

   Va con areas y no con un envoltorio porque los hijos del <li> los pone
   post-template uno detras de otro: no hay donde meter un div sin salirse de
   los bloques de core. El orden de estas dos reglas importa: la segunda tiene
   la misma especificidad que la primera y la corrige. */
@media (min-width: 720px) {
  .eg-blog-entries > li:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Dos filas elasticas, arriba y abajo, y el texto en las tres de en medio:
       asi el texto queda centrado a lo alto Y las filas siguen llenando la
       tarjeta, que es lo que necesita la foto para cubrir su columna entera.

       Con `align-content: center` -que fue el primer intento- el grupo de filas
       se centraba y se encogia, y la foto, que ocupa de la primera a la ultima,
       se quedaba en una banda a media tarjeta con fondo oscuro arriba y abajo.

       Las filas van puestas a mano porque los hijos del <li> los coloca
       post-template uno detras de otro y no hay donde meter un envoltorio sin
       salirse de los bloques de core. */
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 22px;
  }
  .eg-blog-entries > li:first-child > * { grid-column: 2; }
  .eg-blog-entries > li:first-child > .eg-blog-entry__meta { grid-row: 2; }
  .eg-blog-entries > li:first-child > .eg-blog-entry__title { grid-row: 3; }
  .eg-blog-entries > li:first-child > .eg-blog-entry__excerpt { grid-row: 4; }
  .eg-blog-entries > li:first-child {
    /* El alto lo pone el texto, no la foto, y este suelo evita que la
       destacada quede mas baja que las dos que van debajo. */
    min-height: 280px;
  }
  .eg-blog-entries > li:first-child > .eg-blog-entry__media {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: -16px 0 -18px -18px;
    border-bottom: 0;
    border-right: var(--eg-border-width) solid var(--eg-frame);
    /* La foto se saca del flujo dentro de su hueco: core le pone una
       `aspect-ratio` en linea, y con ella puesta era la foto la que decidia el
       alto de la tarjeta -1120px de ancho a 16:9 son 306px de alto- y el texto
       se quedaba flotando en un tercio de caja vacia. Recortada al hueco, el
       alto lo manda el contenido y la foto lo rellena. */
    position: relative;
    overflow: hidden;
  }
  .eg-blog-entries > li:first-child > .eg-blog-entry__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.eg-blog-entry__excerpt {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--eg-text-dim);
  max-width: none;             /* dentro de una tarjeta la medida la pone la caja */
}

/* --- Paginacion con numeros. Con solo "anterior/siguiente", llegar a la
       primera entrada publicada costaba un clic por pagina. */
.eg-pagination { margin-top: 28px; align-items: center; gap: 10px; }
.eg-pagination .wp-block-query-pagination-numbers { display: flex; gap: 6px; align-items: center; }
.eg-pagination a,
.eg-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: var(--eg-border-width) solid var(--eg-frame);
  background: var(--eg-chrome);
  box-shadow: var(--eg-bevel-out);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-text);
  text-decoration: none;
}
.eg-pagination a:active { box-shadow: var(--eg-bevel-in); }
/* La pagina en la que estas va HUNDIDA, como un boton pulsado que se queda
   dentro: es el mismo gesto con el que el sistema dice "estas aqui". */
.eg-pagination .page-numbers.current {
  box-shadow: var(--eg-bevel-in);
  background: var(--eg-field);
  color: var(--eg-text);
}
.eg-pagination .page-numbers.dots {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--eg-text-dim);
}

/* --- Navegacion por categorias. Son ENLACES, asi que se visten de boton del
       sistema y no de chip: la chip del kit es una casilla de formulario, con
       su cuadro y su marca al seleccionar, y dibujar un control que no es un
       control es la misma promesa incumplida que subrayar la inicial de un
       menu que no responde a Alt.

       El recuento lo pinta core como texto suelto detras del enlace, fuera del
       <a>: de ahi que el color vaya en el <li> y el enlace lo suba. */
.eg-cat-nav .wp-block-categories {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.eg-cat-nav .wp-block-categories li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  color: var(--eg-text-dim);
}
.eg-cat-nav .wp-block-categories a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: var(--eg-border-width) solid var(--eg-frame);
  background: var(--eg-chrome);
  box-shadow: var(--eg-bevel-out);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-text);
  text-decoration: none;
}
.eg-cat-nav .wp-block-categories a:hover { text-decoration: underline; }
.eg-cat-nav .wp-block-categories a:active { box-shadow: var(--eg-bevel-in); }

/* --- La entrada.

       Fecha y minutos de lectura en paneles hundidos, los mismos de la barra de
       estado: son los dos datos que alguien mira antes de decidir si se pone a
       leer ahora. Los dos salen del servidor. */
.eg-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.eg-post-meta > * {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  background: var(--eg-field);
  box-shadow: var(--eg-bevel-sunk);
  color: var(--eg-text-dim);
}

/* La imagen destacada va hundida en el marco, como el hueco de foto: es una
   ventana al contenido, no una lamina flotando encima.

   Y se para en la medida de lectura, no en los 1120px del contenedor. El
   usuario lo pidio el 2026-09-15 -"que la foto destacada de las entradas no sea
   tan grande en la pagina del post"-: a todo el ancho medía 1120x620, o sea
   media pantalla de portatil antes de la primera frase. Alineada con la columna
   de texto, el titular, la fecha, la foto y el cuerpo empiezan y acaban en la
   misma linea. No se recorta: se sirve entera y mas pequeña. */
.eg-post-featured { margin: 0; }
.eg-post-featured img {
  display: block;
  width: 100%;
  /* La medida de lectura, la misma que el cuerpo: el titular, la fecha, la foto
     y el texto empiezan y acaban en la misma linea. */
  max-width: 68ch;
  height: auto;
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-sunk);
}

/* Al acabar una entrada no habia ningun sitio al que ir: se terminaba el texto
   y empezaba el pie. Dos tarjetas, y el hueco que WordPress no rellena -no hay
   entrada anterior, o no hay siguiente- no se pinta. */
.eg-post-nav { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 720px) { .eg-post-nav { grid-template-columns: 1fr 1fr; } }
.eg-post-nav__link {
  border: var(--eg-border-width) solid var(--eg-frame);
  background: var(--eg-chrome);
  box-shadow: var(--eg-bevel-out), var(--eg-shadow);
}
.eg-post-nav__link:active { box-shadow: var(--eg-bevel-in), var(--eg-shadow); }
/* Core NO mete la etiqueta dentro del enlace, como supuse al escribir esto:
   pinta `<span class="post-navigation-link__label">Anterior</span><a>Titulo</a>`,
   con la etiqueta HERMANA del <a>. Medido sobre la pagina servida. Asi que la
   etiqueta va en mono y apagada, el titular en display, y el area pulsable la
   estira un pseudoelemento del enlace hasta cubrir la tarjeta entera. */
.eg-post-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}
.eg-post-nav__link .post-navigation-link__label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-text-dim);
}
.eg-post-nav__link a {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--eg-text);
  text-decoration: none;
}
.eg-post-nav__link a::after { content: ""; position: absolute; inset: 0; }
.eg-post-nav__link a:hover { text-decoration: underline; }
.eg-post-nav__link:has(a:focus-visible) { outline: var(--eg-focus-ring); outline-offset: 2px; }
.eg-post-nav__link--next { text-align: right; }
/* En la entrada mas nueva no hay "siguiente": core pinta el envoltorio VACIO,
   que sin esto es una tarjeta biselada con nada dentro. */
.eg-post-nav__link:not(:has(a)) { display: none; }

/* --- La medida de lectura del cuerpo del articulo.

   Las lineas corrian los 1120px del contenedor: unos 140 caracteres, el doble
   de lo que el ojo sigue sin perder el renglon al volver. La regla general
   `p { max-width: 68ch }` no llegaba aqui por especificidad: core pone
   `max-width` a cada hijo de una disposicion constrained con un selector de
   clase (0,1,0) y un `p` pelado vale (0,0,1). De ahi las dos clases, que le
   ganan sin depender del orden en que se impriman las hojas.

   Lo que NO se estrecha: las imagenes, los embeds y las tablas. Una captura de
   codigo a 68ch es ilegible, y en el diseño la foto es la que respira. */
.eg-post-body.wp-block-post-content > * { max-width: 68ch; }
.eg-post-body.wp-block-post-content > figure,
.eg-post-body.wp-block-post-content > .wp-block-image,
.eg-post-body.wp-block-post-content > .wp-block-embed,
.eg-post-body.wp-block-post-content > .wp-block-table,
.eg-post-body.wp-block-post-content > .wp-block-gallery,
.eg-post-body.wp-block-post-content > pre { max-width: none; }

/* El perfil de via ya no se pega arriba en los articulos. Llevaba
   `position: sticky` y avanzaba con el scroll; el usuario lo mando quitar el
   2026-09-15: "la barra esa que se mueve cuando vas haciendo scroll en los post
   que desaparezca". No queda ningun elemento sticky en el sitio, y hay un
   portero en interactivity.mjs que lo comprueba sobre una entrada. */

/* --- Cabecera v5: la cabecera del sitio ES la ventana principal.

   Fondo de cromo, filete inferior y un bisel de una sola linea arriba y abajo.
   La pagina deja de ser un documento sobre un fondo y pasa a estar DENTRO de
   algo, que es el gesto que sostiene el resto del sistema. */
.eg-header {
  background: var(--eg-chrome);
  border-bottom: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: inset 0 -1px var(--eg-bevel-dark), inset 0 1px var(--eg-bevel-light);
}

/* El cromo de la barra de titulo del sitio, con los TRES pseudoelementos que
   hay a mano y sin marcado: el ::before de la barra es la caja de sistema, y
   el ::before/::after del titulo son los dos controles, con su glifo.

   Antes el segundo control era una sombra desplazada del primero, que no puede
   llevar texto, y un implementador lo resolvio metiendo tres <span> a pelo en
   el grupo: en el front se veian, pero el Editor de sitios no los reconoce y
   los tira el dia que alguien guarda la cabecera. Cromo que no es bloque tiene
   que ser CSS.

   La caja de sistema lleva su guion como un degradado plano centrado: un
   pseudoelemento no puede tener hijos. */
.eg-header__bar::before,
.eg-header__mark::before,
.eg-header__mark::after {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eg-chrome);
  border: 1px solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out);
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700;
  font-size: 8px;
  line-height: 1;
  color: var(--eg-text);
}
.eg-header__bar::before {
  content: "";
  background: linear-gradient(var(--eg-text), var(--eg-text)) center / 10px 3px no-repeat, var(--eg-chrome);
}
.eg-header__mark::before,
.eg-header__mark::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* Un elemento absoluto se posiciona contra la caja de RELLENO de su ancestro,
   que el padding-inline de arriba no encoge: `right: 2px` seguiria siendo 2px
   desde el borde de la barra. Asi que el desplazamiento se repite aqui.

   Y NO se puede reutilizar --eg-frame-inset tal cual, aunque lo intente: un
   porcentaje se resuelve contra el bloque contenedor, que para el relleno de la
   barra es la cabecera (ancho completo) y para estos dos es la caja de relleno
   de la barra, 6px mas estrecha por sus dos margenes de 3px. Con el token sin
   corregir los controles quedaban 3px fuera del contenido, y solo en pantallas
   anchas: por debajo de 1160 manda el margen de 20px y la diferencia de base
   desaparecia. Medido a 1440, 1200, 1160, 1024, 768 y 375.

   Los 21px son la separacion entre los dos controles. */
.eg-header__mark::before { content: "\25BC"; right: calc(max(20px, (100% + 6px - 1120px) / 2) - 3px + 21px); }
.eg-header__mark::after  { content: "\25B2"; right: calc(max(20px, (100% + 6px - 1120px) / 2) - 3px); }

/* El logotipo del diseño es "eneko" en minuscula con un punto ambar. Se pinta
   como texto y no como imagen: pesa cero y escala solo. El nombre completo va en
   aria-label, para quien lo escuche en vez de verlo. */
.eg-wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--eg-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* Ojo: la regla de arriba convierte estos elementos en contenedores flex, y en
   un contenedor flex `text-align: center` no centra nada -el texto pasa a ser
   un item anonimo que coloca justify-content-. Las pestañas del ranking
   declaraban text-align: center y salian pegadas a la izquierda por esto. */
.eg-wordmark__dot { color: var(--eg-accent-text); }

/* Texto secundario. Va por variable semantica, no por slug de la paleta: un
   slug es de un tema concreto y no puede cambiar con el otro. Nombrar
   "text-dim" en una plantilla dejaba el parrafo a 1,98:1 sobre papel. */
.eg-dim { color: var(--eg-text-dim); }

/* --- Los elementos de la barra de menus.

   Inter de 13px con interlineado 1 y relleno de 6/10, que es lo que da una
   barra de 25px de alto. Al pasar por encima se ilumina con la superficie
   hundida y la pagina actual lleva el fondo de la barra de titulo: la misma
   señal que distingue una ventana activa.

   El bloque de navegacion del nucleo impone
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item
    { color: inherit }`, con especificidad (0,3,0). Un `.eg-nav__cta a` (0,1,1)
   pierde en silencio. Se iguala el terreno en vez de recurrir a !important. */
.wp-block-navigation .eg-nav__item a.wp-block-navigation-item__content {
  position: relative;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  min-height: 0;
  color: var(--eg-text);
  text-decoration: none;
}

/* La letra subrayada del diseño, y NO siempre la inicial.

   El subrayado de una barra de menus significa "Alt+esa letra abre esto", asi
   que EG\Core\Navigation lo implementa de verdad con accesskey y elige que
   letra toca: el menu tiene dos entradas con S -Servicios y Sobre mi- y dos con
   C -Coasters y Contacto-, asi que subrayar la inicial de cada una dejaria
   cuatro atajos ambiguos de seis. Cada entrada se queda la primera letra libre,
   que es lo que hacian las barras de menus de verdad.

   Aqui solo se pinta. El <u> lo pone el filtro. */
.wp-block-navigation .eg-nav__item a.wp-block-navigation-item__content { display: block; }
.wp-block-navigation .eg-nav__item u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wp-block-navigation .eg-nav__item a.wp-block-navigation-item__content:hover {
  color: var(--eg-text);
  background: var(--eg-surface-3);
}

.wp-block-navigation .eg-nav__item a.wp-block-navigation-item__content[aria-current="page"] {
  background: var(--eg-titlebar);
  color: var(--eg-titlebar-on);
}
/* Y la caja de sistema se ancla al principio pase lo que pase.

   La plantilla declara el grupo con justifyContent:"center" -asi centra core el
   titulo- pero centrar es repartir el sobrante a los dos lados, y eso solo es
   inofensivo mientras el titulo pueda absorberlo entero con su `flex: 1`. El
   dia que algo se lo impida, la caja de sistema se va al centro con el. Aqui se
   centra el TEXTO dentro del titulo, que ocupa todo el hueco, asi que el
   contenedor no tiene nada que repartir y esta regla no cambia nada de lo que
   se ve hoy: existe para que el fallo no pueda volver por otra puerta. Gana a
   la regla de core por especificidad, sin depender del orden de las hojas. */
.eg-header .eg-header__bar { justify-content: flex-start; }

/* Contacto va en negrita, no en ambar. En v4 iba en ambar porque era el unico
   acento del menu; en v5 el ambar del menu es el de la pagina actual, y dos
   ambares en la misma fila dejan de señalar nada. */
.wp-block-navigation .eg-nav__cta a.wp-block-navigation-item__content {
  font-weight: 700;
}

/* El objetivo tactil de 44px sin engordar la barra.

   El diseño pide una barra de 25px y el encargo pide 44px de area pulsable. No
   se contradicen si se separan las dos cosas, que es la misma tecnica que ya
   usa el conmutador: la caja visible mide lo que tiene que medir y un
   pseudoelemento absoluto con insets negativos estira el area. Va detras del
   texto para no taparlo. */
.wp-block-navigation .eg-nav__item a.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

/* --- El conmutador de tema es un elemento mas de la barra, a la derecha.

   Era una caja biselada de 26px flotando a media altura entre el ultimo enlace
   y el borde: se leia como un control de otro sitio pegado al menu. El diseño
   lo pone como `.eg-header__aside .eg-header__link`, o sea transparente, sin
   borde y en texto atenuado. Asi ademas alinea solo con los demas. */
/* En el menu se alinea el TEXTO y no la caja, porque los elementos no tienen
   caja visible: su relleno de 10px es area pulsable, no dibujo. Se descuenta a
   los dos lados -la lista por la izquierda, el conmutador por la derecha- para
   que la primera y la ultima palabra caigan sobre el borde del contenido. */
.eg-header__nav .wp-block-navigation__container { margin-inline-start: -10px; }
.eg-header .eg-theme-switch { margin-left: auto; margin-right: -10px; display: flex; }
.eg-header .eg-theme-toggle {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 6px 10px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: normal;
  color: var(--eg-text-mute);
  cursor: pointer;
}
.eg-header .eg-theme-toggle:hover {
  color: var(--eg-text);
  background: var(--eg-surface-3);
}
.eg-header .eg-theme-toggle:active { box-shadow: none; }

/* --- Vista de parques de /coasters/. */
.eg-ranking__parks { list-style: none; margin: 0; padding: 0; }
/* Cada parque es una ventana (ver mas abajo, .eg-ranking__parks en rejilla):
   sin relleno ni filete propios, que eran de cuando esto era una lista. Y la
   ventana entera se pulsa, no solo el nombre: el kit la declara interactiva y
   el enlace se estira con un ::after hasta cubrir la ficha. */
.eg-ranking__park { position: relative; padding: 0; border-bottom: 0; }
.eg-ranking__park-name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 17px; line-height: 1.2; text-transform: uppercase;
  color: var(--eg-text); text-decoration: none;
}
.eg-ranking__park-name::after { content: ""; position: absolute; inset: 0; }
.eg-ranking__empty { color: var(--eg-text-mute); font-size: 13px; padding: 18px 0; }

/* ---------------------------------------------------------------------------
   Objetivos tactiles y caja de los campos.

   Salieron de revisar el sitio en un navegador de verdad a 375, 768 y 1280:
   160 enlaces de navegacion median menos de 44px de alto, y los campos del
   formulario desbordaban la pantalla 6px en movil porque el padding y el borde
   se sumaban al 100% de ancho.
   --------------------------------------------------------------------------- */

/* Un objetivo tactil de 44px es el minimo del encargo. Se consigue con area,
   no con tamaño de letra: el texto sigue midiendo lo que dice el diseño. */
.wp-block-navigation-item__content,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
/* Las pestañas del ranking ya no estan en esa lista: con min-height y
   box-sizing content-box medían 64px donde el kit (layout.css .eg-tab: padding
   9px 12px, sin alto minimo) las pinta de unos 35. Los 44px de area pulsable
   los pone un ::after con insets negativos, la misma tecnica que en el menu. */
.eg-ranking__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eg-ranking__tab::after { content: ""; position: absolute; inset: -6px 0; }

/* Ojo: la regla de arriba convierte estos elementos en contenedores flex, y en
   un contenedor flex `text-align: center` no centra nada -el texto pasa a ser
   un item anonimo que coloca justify-content-. Las pestañas del ranking
   declaraban text-align: center y salian pegadas a la izquierda por esto. */

.eg-btn,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-height: 44px;
  /* El alto minimo cuenta el relleno y el marco.

     Sin esto, un `min-height` de 44 sobre una caja content-box significa 44 de
     CONTENIDO mas 22 de relleno mas 2 de marco: 68. Un <button> no lo sufria
     porque el navegador ya lo pinta border-box, asi que el defecto solo salia
     en los .eg-btn que son <a>, y hasta el 22/09 no habia ninguno. El primero
     -los enlaces de compartir- salio midiendo 68 al lado de un boton de 44.

     Es el mismo defecto que ya esta contado doce lineas mas arriba, con las
     pestañas del ranking: mismo min-height, misma caja, 64px donde el kit pide
     35. Alli se quito el min-height; aqui hace falta, asi que se arregla la
     caja. */
  box-sizing: border-box;
}

.eg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* El 100% de ancho tiene que incluir padding y borde, o el campo desborda. */
.eg-enquiry textarea,
.eg-enquiry input[type="text"],
.eg-enquiry input[type="email"] {
  box-sizing: border-box;
  max-width: 100%;
}

/* Ningun elemento debe poder ensanchar el documento en movil. */
img, svg, video, table, pre { max-width: 100%; }

/* Texto solo para lector de pantalla. El tema no puede dar por hecho que otra
   hoja lo defina: si falta, todas las etiquetas accesibles se vuelven visibles. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip-path: none;
  white-space: normal;
}

/* --- Pie. El diseño lo quiere con email y redes; Telegram baja aqui desde la
       pagina de contacto, como alternativa al formulario. */
.eg-footer { border-top: 1px solid var(--eg-hairline); }
.eg-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}
.eg-footer__mail {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  color: var(--eg-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* Ojo: la regla de arriba convierte estos elementos en contenedores flex, y en
   un contenedor flex `text-align: center` no centra nada -el texto pasa a ser
   un item anonimo que coloca justify-content-. Las pestañas del ranking
   declaraban text-align: center y salian pegadas a la izquierda por esto. */
.eg-footer__social { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.eg-footer__social a {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--eg-text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* Ojo: la regla de arriba convierte estos elementos en contenedores flex, y en
   un contenedor flex `text-align: center` no centra nada -el texto pasa a ser
   un item anonimo que coloca justify-content-. Las pestañas del ranking
   declaraban text-align: center y salian pegadas a la izquierda por esto. */
.eg-footer__social a:hover { color: var(--eg-accent-text); }

/* --- POV. Enlace saliente, nunca un reproductor de terceros incrustado. */
.eg-pov { margin-top: 18px; }

/* --- Fila de enlaces sociales en cajas. Es la variante de Sobre mi; el pie usa
       la fila simple. Misma informacion, dos densidades. */
.eg-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.eg-social__box {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: var(--eg-border-width) solid var(--eg-frame);
  background: var(--eg-chrome);
  box-shadow: var(--eg-bevel-out);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--eg-text-dim);
  text-decoration: none;
}
.eg-social__box:hover { color: var(--eg-text); }
/* Se hunde al pulsar, como todo lo demas. v5 no tiene desplazamiento de hover. */
.eg-social__box:active { box-shadow: var(--eg-bevel-in); }

/* Los encabezados que llevan la clase de etiqueta no heredan la tipografia
   display: son etiquetas de seccion, no titulares. La etiqueta HTML dice la
   estructura; la clase dice el aspecto. */
h2.eg-label, h3.eg-label, .eg-status__title {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--label);
  line-height: 1.2;
  letter-spacing: 0.10em;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Estados que faltaban. Salieron de una auditoria de interfaz: elementos
   accionables sin respuesta al raton, y errores señalados solo por un texto
   pequeño debajo del campo.
   --------------------------------------------------------------------------- */

/* Las pestañas y el conmutador responden como todo lo demas del sitio: el
   puntero solo aclara el texto; lo que cambia de forma es el pulsado. */
.eg-ranking__tab:hover:not(.is-active),
.eg-theme-toggle:hover {
  color: var(--eg-text);
}
.eg-theme-toggle:active { box-shadow: var(--eg-bevel-in); }

/* Enviando: el boton tiene que PARECER que no se puede pulsar, no solo estarlo.
   Un boton identico pero muerto se pulsa tres veces y se percibe como roto. */
.eg-enquiry__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* El campo con error se marca en el campo, no solo debajo. El texto pequeño en
   rojo bajo un campo se pasa por alto; un borde de 2px, no. */
.eg-enquiry [aria-invalid="true"] {
  border-color: var(--eg-trace-unsourced);
  border-width: 2px;
}
.eg-enquiry__error:empty { display: none; }

/* Titulos de entrada: son enlaces de una lista, no titulares de portada.
   theme.json aplica el tratamiento display -900, interlineado 0.95, tracking
   negativo- a CUALQUIER encabezado sin clase propia, y a tamaños pequeños eso
   hace que las lineas se toquen al envolver en movil. */
.wp-block-post-title {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
}
.wp-block-post-title.has-display-l-font-size,
.wp-block-post-title.has-display-xl-font-size {
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* WordPress aplica `.is-layout-flow > * { margin-block-start: 24px }` a los hijos
   de un grupo. En una rejilla eso desplaza la etiqueta de formato 24px por
   debajo del titulo, cuando el diseno la quiere en la misma linea base. La
   separacion la pone el `gap` de la rejilla, no el margen de los hijos. */
/* Tambien los hijos DIRECTOS de las rejillas: sin esto las tarjetas de servicio
   se escalonaban 24px entre columna y columna, porque la segunda recibia el
   margen que WordPress da a todo hermano que no sea el primero. En una rejilla
   ese margen no separa, descuadra. */
.eg-service-row > *,
.eg-service > *,
.eg-cta > *,
.eg-services__grid > *,
.eg-service-rows > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --- Correo. Sin JavaScript se lee "info (arroba) dominio"; con el, es un
       enlace. La cadena completa nunca esta en el HTML. */
.eg-email,
.eg-email__link {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  color: var(--eg-text);
  text-decoration: none;
}
.eg-footer__mail.eg-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* Ojo: la regla de arriba convierte estos elementos en contenedores flex, y en
   un contenedor flex `text-align: center` no centra nada -el texto pasa a ser
   un item anonimo que coloca justify-content-. Las pestañas del ranking
   declaraban text-align: center y salian pegadas a la izquierda por esto. */
.eg-email__link:hover { color: var(--eg-accent-text); }

/* ---------------------------------------------------------------------------
   Aviso de cookies. Un cartel de seguridad de atraccion, no un modal de
   consentimiento: no hay nada que consentir. La banda de peligro va arriba, como
   en la valla de acceso a una cola.
   --------------------------------------------------------------------------- */
.eg-notice {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: var(--eg-surface-elevated);
  border-top: var(--eg-border-width) solid var(--eg-border);
}
.eg-notice[hidden] { display: none !important; }

/* Regla ambar maciza, NO la banda de señalizacion.
   El diseño permite una sola banda por pantalla -cierre de pagina y 404- y el
   pie ya lleva la suya. El aviso se superpone justo encima, asi que repetir el
   rayado ponia dos en pantalla a la vez y gastaba el motivo. Una linea maciza
   sigue leyendose como aviso sin competir con el cierre. */
.eg-notice__bar {
  height: 3px;
  background: var(--wp--preset--color--amber);
}

.eg-notice__body {
  max-width: 1120px;
  margin-inline: auto;
  padding: 14px 20px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: center;
}
.eg-notice__label { grid-column: 1; grid-row: 1; color: var(--eg-accent-text); }
.eg-notice__text {
  grid-column: 1; grid-row: 2;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--eg-text-dim);
}
.eg-notice__ok { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 700px) {
  .eg-notice__body { grid-template-columns: 1fr; }
  .eg-notice__ok { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 8px; }
}

/* ---------------------------------------------------------------------------
   Menu movil a pantalla completa.

   El bloque de navegacion de core pinta la capa con background-color blanco
   cuando no se le da fondo. En tema oscuro eso era una hoja blanca con enlaces
   gris palido encima -unos 2:1- y ademas fuera de la piel del sitio. Ningun
   portero lo veia porque el estado solo existe detras de un clic.
   --------------------------------------------------------------------------- */
/* Se copia el selector de core, `.wp-block-navigation:not(.has-background) ...`,
   porque tiene especificidad (0,3,0) y cualquier regla mas corta pierde. */
.wp-block-navigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--eg-surface);
  color: var(--eg-text);
  padding: 20px;
}

/* Sin fades. Lo dice el sistema: "sin fades, sin escalados, sin bounce". */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open * {
  animation: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 44px;
}

/* Abierto a pantalla completa ya NO es una barra de menus: es una lista.

   La barra de menus de v5 mide 25px por diseño y su objetivo tactil lo estira
   un pseudoelemento. Esa regla, al ser mas especifica, se estaba llevando por
   delante el tratamiento del desplegable: dentro de la capa el nucleo quita el
   relleno, asi que los elementos quedaban en 13px de caja y 37 de area
   pulsable, siete por debajo del minimo del encargo. Lo caza el portero visual,
   no la vista: la capa solo existe detras de un clic.

   El selector lleva `.eg-nav__item` para ganar en especificidad a la regla de
   la barra, en vez de recurrir a !important. */
.wp-block-navigation__responsive-container.is-menu-open .eg-nav__item a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: normal;
  padding: 14px 16px;
  min-height: 52px;
  border-bottom: 1px solid var(--eg-hairline);
}

/* La lista ocupa el ancho de la capa. Sin esto, cada elemento medía lo que su
   texto y el fondo de la pagina actual salia como un recuadro ambar suelto a
   media pantalla, que es lo que parecia: un error, no un estado. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
}

/* Sin separacion entre elementos: los filetes ya separan, y el `gap` que pone
   el nucleo dejaba una linea si y otra no, con huecos desiguales entre ellas.
   Una lista con separadores irregulares se lee como una lista mal hecha. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0;
  align-items: stretch;
}

/* A la izquierda, como en la barra. El nucleo centra el texto de la capa y eso
   convierte un menu en un cartel: seis palabras centradas una debajo de otra no
   tienen borde comun por el que recorrerlas con la vista. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  justify-content: flex-start;
  text-align: left;
}

/* En la capa, Contacto va en negrita como en la barra, no en ambar. El ambar de
   la navegacion significa una sola cosa -esta es la pagina en la que estas- y
   con dos entradas en ambar deja de significarla. */
.wp-block-navigation__responsive-container.is-menu-open .eg-nav__cta a.wp-block-navigation-item__content {
  color: var(--eg-text);
  font-weight: 700;
}
.wp-block-navigation__responsive-container.is-menu-open .eg-nav__item a.wp-block-navigation-item__content[aria-current="page"] {
  background: var(--eg-titlebar);
  color: var(--eg-titlebar-on);
}

/* El subrayado del atajo no aplica en la capa: Alt+letra abre un menu, y aqui
   no hay menu que abrir sino una lista ya desplegada. Se deja la letra sin
   marcar antes que marcarla sin que signifique nada. */
.wp-block-navigation__responsive-container.is-menu-open .eg-nav__item u {
  text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .eg-nav__item a.wp-block-navigation-item__content {
  color: var(--eg-text);
}


/* La cruz de cerrar tiene que verse sobre el fondo del tema, no sobre blanco. */
.wp-block-navigation__responsive-container-close {
  color: var(--eg-text);
}
.wp-block-navigation__responsive-container-close svg { fill: currentColor; }

/* Sin relleno arriba: con la lista partida en dos <ul> ese relleno se aplicaba
   a las dos y dejaba un escalon en mitad del menu. La lista ya no se parte
   -Projects quita el enlace del arbol en vez de vaciarlo- pero la regla sobra
   igual: los filetes ya separan. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  padding-top: 0;
}

/* Enlace que sustituye a una incrustacion de terceros. */
.eg-embed-link { margin: 20px 0; }

/* --- Buscador. */
.eg-search { margin-top: 20px; max-width: 460px; }
.eg-search input[type="search"] {
  box-sizing: border-box;
  background: var(--eg-field);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-sunk);
  color: var(--eg-text);
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
  padding: 10px 12px;
  min-height: 44px;
}
.eg-search button {
  min-height: 44px;
  background: var(--eg-accent);
  color: var(--eg-on-accent);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 13px;
  padding: 0 16px;
}
.eg-search button:active { box-shadow: var(--eg-bevel-in); }

/* Aqui habia dos reglas que fijaban a mano la medida del titular (830px) y la
   del parrafo (62ch) del hero. Eran el parche de una ausencia: el kit pone una
   segunda columna de 260px con el retrato, y al retirarla el 04/09 la medida
   dejo de tener quien la limitara. Con la columna de vuelta (15/09) la pone la
   rejilla, que es de donde tenia que salir. Se retiran.

   Lo que si sigue valiendo, y por eso queda escrito: el hero usa layout
   "default" (flujo) y no "constrained". El layout constrained del nucleo emite,
   sobre CADA hijo, `margin-left: auto !important; margin-right: auto
   !important`, asi que en cuanto le pones un max-width a algo de dentro se
   centra y no hay especificidad que le gane. Es la misma trampa que obliga al
   !important de .eg-cta y .eg-enquiry-window. */

/* Aqui iba la leyenda visible del punto de trazabilidad. El kit no la tiene y
   se retira por fidelidad; lo que dice cada punto sigue en el screen-reader-text
   de su fila, que es lo que oye quien no lo ve. */

/* --- Seccion de trabajo. Reutiliza la retorica de la rejilla de credits: mismo
   encabezado con etiqueta a la izquierda y salida a la derecha, mismas
   tarjetas. Un proyecto de cliente y una atraccion son el mismo componente con
   otro juego de campos, que es la tesis del sistema. */
.eg-projects__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.eg-projects__all { text-decoration: underline; color: var(--eg-accent-text); }

.eg-projects__grid {
  display: grid;
  /* El bloque escribe --eg-cols con el numero real de fichas, hasta tres. */
  grid-template-columns: repeat(var(--eg-cols, 3), 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .eg-projects__grid { grid-template-columns: 1fr; }
}

.eg-projects__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.eg-projects__media { display: block; height: 120px; overflow: hidden; }
.eg-projects__media img { width: 100%; height: 120px; object-fit: cover; }

.eg-projects__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--eg-text);
}

.eg-projects__desc { font-size: 12px; line-height: 1.5; color: var(--eg-text-dim); }

/* Lista del archivo /proyectos/: filas, no tarjetas. Una ficha de proyecto se
   lee, no se ojea. */
.eg-project-list > li {
  padding: 20px 0;
  border-bottom: 1px solid var(--eg-hairline);
}
.eg-project-list > li:first-child { border-top: 1px solid var(--eg-hairline); }

/* ---------------------------------------------------------------------------
   v5 "Acero 3.1" — la ventana y sus dos barras.

   El sistema pasa de "tarjeta con borde" a "ventana de escritorio": un marco,
   un bisel saliente y una barra de titulo. La ventana es el contenedor del que
   cuelga todo lo demas, y por eso es un bloque de verdad (eg/window) y no una
   clase que haya que recordar: se inserta, se titula y se rellena desde el
   Editor de sitios.
   --------------------------------------------------------------------------- */

.eg-window {
  display: flex;
  flex-direction: column;
  background: var(--eg-chrome);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out), var(--eg-shadow);
}

/* El margen de 2px es lo que deja ver el bisel de la ventana por detras de la
   barra. Sin el, la barra toca el marco y la pieza se aplana. */
.eg-window__bar {
  display: flex;
  align-items: center;
  gap: 3px;
  /* Alto FIJO, como layout.css .eg-window__bar. Con min-height y el interlineado
     del cuerpo heredado la barra crecia a 28px; el kit la pide de 24. */
  height: var(--wp--custom--titlebar-height);
  line-height: 1;
  margin: 2px;
  padding: 2px;
  background: var(--eg-titlebar);
  color: var(--eg-titlebar-on);
}

/* Ventana inactiva: las que acompañan. Una sola ventana por pantalla lleva la
   barra en ambar, y es la que importa. Si todas van en ambar, ninguna destaca. */
.eg-window--inactive .eg-window__bar {
  background: var(--eg-titlebar-off);
  color: var(--eg-titlebar-off-on);
}

/* Caja de sistema y controles. Son CROMO, no interfaz: no hacen nada, no
   reciben foco y van con aria-hidden. Un control que parece pulsable y no lo es
   se prueba una vez y se lee como una web rota; declararlo decorativo es la
   diferencia entre una cita y un engaño. */
.eg-window__sys,
.eg-window__ctl {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eg-chrome);
  border: 1px solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out);
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 700;
  font-size: 8px;
  line-height: 1;
  color: var(--eg-text);
}
.eg-window__sys::before {
  content: "";
  width: 10px;
  height: 3px;
  background: var(--eg-text);
  box-shadow: 1px 1px 0 var(--eg-bevel-dark);   /* el guion tambien tiene relieve */
}

.eg-window__title {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  text-align: center;
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eg-window__body { flex: 1; padding: 16px; }
.eg-window__body > :last-child { margin-bottom: 0; }

/* WordPress da `margin-block-start: 24px` a todo hermano que no sea el primero
   dentro de un grupo. Dentro de una ventana ese margen suma al relleno y
   descuadra el cuerpo respecto a la barra. La separacion la pone el blockGap. */
.eg-window__body > * { margin-block-start: 0; }

.eg-window__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

/* --- Barra de estado. Cierra la pagina con los datos del sitio en paneles
       hundidos, que es donde vivian en un escritorio de 1992: abajo, pequeños y
       sin pedir nada. */
.eg-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  /* Aqui cuadra el BORDE de la celda, al contrario que en el menu: una celda
     de la barra de estado es un panel hundido que se ve, y alinear su texto
     dejaria el panel sobresaliendo del contenido. */
  padding: 3px var(--eg-frame-inset);
  background: var(--eg-chrome);
  border-top: var(--eg-border-width) solid var(--eg-frame);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.eg-statusbar__cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 10px;
  box-shadow: var(--eg-bevel-sunk);
  color: var(--eg-text-dim);
}
.eg-statusbar__cell--grow { flex: 1; }
.eg-statusbar__cell strong { font-weight: 500; color: var(--eg-text); }

/* Los enlaces de la barra de estado son enlaces, no celdas decorativas: llevan
   el objetivo tactil del encargo y se subrayan. */
a.eg-statusbar__cell {
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--eg-text-dim);
}
a.eg-statusbar__cell:hover { color: var(--eg-text); }
a.eg-statusbar__cell:active { box-shadow: var(--eg-bevel-out); }

/* --- Fila de credit: el archivo completo, sin posicion.

   Es la fila de ranking menos el indice. Que sean dos componentes y no uno con
   el numero oculto es el punto entero: /coasters/?vista=all es una <ul>
   alfabetica, y una lista sin orden no debe reservar un hueco donde iria el
   orden. */
.eg-ranking__list--sin-orden { list-style: none; margin: 0; padding: 0; }

/* Dos columnas desde 900px: 72 filas de una sola columna son una cinta de
   scroll, y el diseño las pide a dos. */
@media (min-width: 900px) {
  .eg-ranking__list--sin-orden {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }
}

/* --- Cabecera v5: barra de titulo del sitio + barra de menus. */
.eg-header__bar {
  position: relative;          /* los controles del titulo se anclan aqui */
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;                /* layout.css: 28px fijos, no minimos */
  margin: 3px;
  /* El relleno lateral mete la caja de sistema hasta el borde del contenido.
     Se descuentan los 3px de margen de la barra: lo que tiene que cuadrar con
     el texto es el borde de la CAJA, no el de la barra, que va a sangre. */
  padding: 2px calc(var(--eg-frame-inset) - 3px);
  background: var(--eg-titlebar);
  color: var(--eg-titlebar-on);
}

/* La marca va centrada en la barra de titulo, como el nombre de un documento
   abierto. Es el gesto que mas cambia la lectura de la pagina: deja de ser un
   logotipo en una esquina y pasa a ser el titulo de lo que tienes delante.

   El objetivo tactil de 44px ya no engorda la barra: la barra mide los 28px
   del kit y el area pulsable la estira el ::after del enlace, que es la misma
   tecnica que usan el conmutador y los elementos del menu. */
.eg-header__mark {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eg-header__mark a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
}
.eg-header__mark a::after { content: ""; position: absolute; inset: -10px 0; }
.eg-header__mark:hover,
.eg-header__mark a:hover { color: inherit; }

/* --- Botones de core con la piel del sistema.

   Las plantillas pasan de `wp:html` con dos <a> a `core/buttons`, para que el
   copy se pueda cambiar escribiendo encima en vez de editando marcado. La clase
   del bloque cae en el <div> envolvente, no en el enlace, asi que el bisel hay
   que ponerselo al enlace de dentro. */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  min-height: 44px;
  padding: 11px 18px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  background: var(--eg-chrome);
  color: var(--eg-text);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-out);
}
.wp-block-button__link:hover { color: var(--eg-text); }
.wp-block-button__link:active { box-shadow: var(--eg-bevel-in); padding: 12px 17px 10px 19px; }
.wp-block-button__link:focus-visible { outline: 1px dotted currentColor; outline-offset: -5px; }

.eg-btn--primary .wp-block-button__link {
  background: var(--eg-accent);
  color: var(--eg-on-accent);
}
.eg-btn--primary .wp-block-button__link:hover { color: var(--eg-on-accent); }
:root:not([data-theme="light"]) .eg-btn--primary .wp-block-button__link {
  border-color: var(--wp--preset--color--ink-900);
  box-shadow: var(--eg-bevel-out), 0 0 0 1px var(--eg-accent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .eg-btn--primary .wp-block-button__link {
    border-color: var(--eg-frame);
    box-shadow: var(--eg-bevel-out);
  }
}

/* El envoltorio no debe heredar nada del boton: si lleva fondo o borde, se ve
   un marco alrededor del marco. */
.wp-block-button.eg-btn { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }

/* --- Etiqueta de seccion. Antes era un grupo flex a secas y el texto de la
       derecha se iba al techo de la fila; con baseline las dos lineas se apoyan
       en la misma. */
/* --- Etiqueta de seccion.

   Solo tenia `align-items` porque las dos veces que se usaba eran grupos de
   core con layout flex, y el flex lo ponia el nucleo. En cuanto la use desde
   PHP -en la vista "Todos" de /coasters/- salio como una frase corrida:
   "Todos 82 credits · orden alfabético". La regla completa del diseño estaba
   sin portar y no se notaba porque nadie la habia usado sola. */
.eg-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.eg-section-label > * { margin-block-start: 0; }
.eg-section-label__text {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 500;
  font-size: 9px;              /* --eg-label-s en el kit, no --eg-label */
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eg-text-mute);
}
.eg-section-label__aside { font-size: 12px; line-height: 1.5; color: var(--eg-text-mute); }

@media (max-width: 600px) {
  .eg-section-label { flex-wrap: wrap; gap: 4px 16px; }
}

/* Aqui estaba el estilo de la nota que explicaba por que el ranking se corta en
   el 10. El usuario la mando quitar el 2026-09-15 -"ese texto sobra"- y con ella
   se va su CSS: una clase que ya no pinta nada es una clase que alguien
   reutiliza dentro de tres meses para otra cosa creyendo que existe por algo. */

/* --- Enlaces a los POVs en la cabecera de /coasters/. */
.eg-pov-links { align-items: center; gap: 8px 12px; margin-top: 18px; }
.eg-pov-links > * { margin-block-start: 0; }

/* --- Las dos ventanas de /sobre-mi/. A una sola columna por debajo de 900px,
       que es lo que hacen las columnas de core por su cuenta; aqui solo se
       igualan las alturas para que las dos barras de titulo queden a la misma
       linea. */
.eg-about__ventanas { align-items: stretch; margin-top: 24px; }
.eg-about__ventanas .wp-block-column { display: flex; }
.eg-about__ventanas .eg-window { flex: 1; }

/* --- Los botones de la ventana de presupuesto van abajo a la derecha, como el
       pie de un cuadro de dialogo. */
.eg-cta__acciones { margin-top: 16px; }

/* --- Un panel dentro de una ventana no necesita su propio marco.

   La ficha tecnica ya es una superficie biselada por su cuenta, porque tambien
   se usa suelta. Metida en una ventana quedaba marco sobre marco y bisel sobre
   bisel: dos cajas para una sola cosa. Aqui se le quita el suyo y se queda solo
   el de la ventana, que ademas es el que trae el titulo. */
.eg-window__body .eg-spec-sheet {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Lo mismo para la lista de estado: dentro de una ventana es contenido, no
   panel. */
.eg-window__body .eg-status__head { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Seis defectos de la revision visual de v5. Ninguno lo vio el portero
   automatico: los 190 cargas dieron cero hallazgos y las seis cosas de aqui
   abajo estaban ahi. Un portero mide contraste, desbordes y objetivos
   tactiles; no mide si algo esta bien puesto.
   --------------------------------------------------------------------------- */

/* 1. La barra de MENUS empezaba en x=10 mientras todo el documento empieza en
      x=160. La barra de TITULO si va a sangre, y debe: es el marco de la
      ventana. La de menus no, porque sus elementos son el primer contenido que
      se lee y arrancaban 150px a la izquierda de todo lo demas. El fondo sigue
      cruzando la pantalla; lo que se centra es la fila. */
/* --- La barra de menus, como la diseño Claude Design.

   Antes la alinee con el contenedor de 1120px porque el menu empezaba 24px a la
   derecha del titular y se veia torcido. Estaba arreglando el sintoma
   equivocado: en v5 la cabecera NO es documento, es el marco de la ventana que
   contiene el documento, y el marco va a ras. Una barra de menus de escritorio
   empieza donde empieza la ventana, no donde empieza el texto.

   Lo que si estaba mal era el resto: la barra medía 60px de alto cuando el
   diseño la pide de 25, el conmutador era una caja biselada flotando en vez de
   un elemento mas del menu, y las iniciales no iban subrayadas. */
.eg-header__nav {
  display: flex;
  gap: 0;
  padding: 0 var(--eg-frame-inset) 2px;
  align-items: center;
  /* Los dos grupos de la cabecera son hermanos y el nucleo les mete 24px de
     blockGap entre ellos: quedaba una franja vacia de cromo entre la barra de
     titulo y el menu (medido: 21px). El kit los pega. */
  margin-top: 0;
}

.eg-header__nav .wp-block-navigation { flex: 0 1 auto; }

/* 2. El conmutador flotaba pegado al menu, a 14px del ultimo elemento, que es
      la misma distancia que hay entre dos elementos del menu: parecia uno mas
      con caja. Se va al extremo derecho, que es donde vive un control de
      ventana. */
.eg-header .eg-theme-switch { margin-left: auto; }

/* 3. En movil, el disparador del desplegable y el conmutador quedaban juntos
      en la esquina izquierda. Van a extremos opuestos. */
@media (max-width: 781px) {
  .eg-header__nav { justify-content: space-between; }
}

/* 4. El archivo alfabetico fluia POR FILAS: leyendo hacia abajo la columna
      izquierda salia Abismo, Alpenexpress, ARTHUR, y la derecha Abyssus,
      Alucinakis. Para leer en orden habia que ir en zigzag, que en una lista
      de 82 nombres ordenados alfabeticamente es justo lo que nadie hace.

      Se cambia grid por columnas de texto, que fluyen de arriba abajo y luego
      saltan: la izquierda es de la A a la M y la derecha de la M a la Z.
      `break-inside` impide que una fila se parta por la mitad al saltar. */
@media (min-width: 900px) {
  .eg-ranking__list--sin-orden {
    display: block;
    column-count: 2;
    column-gap: 32px;
  }
  .eg-ranking__row--sin-orden,
  .eg-term-list > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* 5. La barra de estado partia la primera celda en tres lineas a 375px,
      mientras las otras dos cabian de sobra. En pantalla estrecha las celdas
      se apilan enteras. */
@media (max-width: 600px) {
  .eg-statusbar { flex-direction: column; }
  .eg-statusbar__cell { justify-content: space-between; }
}

/* El formulario de encargo, dentro de su ventana, en medida de formulario: los
   campos a 1120px de ancho no se leen como campos. */
/* El formulario ocupaba 600px y no mas, con este motivo escrito: "un campo de
   Nombre de un metro de ancho no invita a escribir un nombre". El usuario lo
   revoco el 2026-09-15: "el formulario de contacto expandelo tambien". Manda
   el usuario, y el ancho maximo pasa a ser el del contenido, como las tres
   barras del marco y el resto de las secciones.

   Lo que NO se hace es estirar los campos a 1120px, que era el problema real
   que el tope de 600 evitaba: a partir de 900px el formulario se reparte en dos
   columnas -a la izquierda lo que se elige, a la derecha lo que se escribe-, y
   ningun campo pasa de la mitad. Sale mas grande y ademas se rellena antes,
   porque las cuatro piezas caben en una pantalla sin bajar.

   La colocacion va explicita, fila y columna, y no por auto-flow: los hijos del
   <form> incluyen tres <input type="hidden"> y la trampa antispam, y aunque hoy
   ninguno ocupa celda -los hidden van display:none por el navegador y la trampa
   va absoluta-, un campo oculto mas colocado de otra forma descuadraria la
   rejilla entera sin que nada avisara. */
.eg-enquiry-window { max-width: none; }

@media (min-width: 900px) {
  .eg-enquiry__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
  }
  .eg-enquiry__form > fieldset.eg-enquiry__step:nth-of-type(1) { grid-area: 1 / 1; }
  .eg-enquiry__form > fieldset.eg-enquiry__step:nth-of-type(2) { grid-area: 2 / 1; }
  /* "El caso" es el campo importante: coge la columna derecha entera y el
     textarea crece hasta el fondo en vez de quedarse en sus cuatro filas. */
  .eg-enquiry__form > div.eg-enquiry__step {
    grid-area: 1 / 2 / span 2 / 2;
    display: flex;
    flex-direction: column;
  }
  .eg-enquiry__form > div.eg-enquiry__step textarea { flex: 1; }
  .eg-enquiry__form > .eg-enquiry__row { grid-area: 3 / 1 / 4 / -1; }
  .eg-enquiry__form > .eg-enquiry__error--form { grid-area: 4 / 1 / 5 / -1; }
  .eg-enquiry__form > .eg-enquiry__pie { grid-area: 5 / 1 / 6 / -1; }
}

/* --- Las dos ventanas con ancho propio, pegadas a la izquierda.

   Es la trampa que este tema ya tiene documentada en .eg-hero: el layout
   "constrained" del nucleo emite, sobre CADA hijo,

       margin-left: auto !important; margin-right: auto !important;

   asi que en cuanto le pones un max-width a algo de dentro, se centra. Y no hay
   especificidad que le gane a un !important; solo otro !important.

   Se ve enseguida en que consiste el defecto: el titular y la entradilla a la
   izquierda, y el cuadro de dialogo flotando en el centro de la pagina como si
   perteneciera a otra maqueta.

   Es la segunda regla del tema con !important, y lleva el mismo motivo que la
   primera: el nucleo pisa lo que escribes y no avisa.

   El 2026-09-15 cayo en la misma trampa el cuerpo del articulo: se le puso la
   medida de lectura de 68ch y las lineas se fueron al centro de la pagina, con
   238px de margen a cada lado, debajo de un titular pegado a la izquierda. Con
   la foto destacada, igual. Medido: `margin-left` resuelto en 238.766px cuando
   la regla propia decia 0. La lista de abajo es el sitio donde esto se arregla;
   si aparece otro elemento estrechado y centrado, va aqui.

   La foto destacada NO esta en la lista, aunque tambien se centraba: su <figure>
   es hija directa del <main>, y ahi el ancho del contenido lo pone justamente
   ese margen automatico. Quitandoselo la foto se iba al borde de la pantalla,
   a 20px, mientras el texto seguia en 160. Medido. Lo que se estrecha alli es
   la imagen dentro de la figura, no la figura. */
.eg-cta,
.eg-enquiry-window,
.eg-post-body.wp-block-post-content > * {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

/* --- La fila de perfiles, ahora que son botones de core dentro de eg/social-row.

   Los perfiles no son acciones: son destinos. Van con la caja biselada del
   sistema pero con la tipografia de etiqueta -mono pequeña en versales- para
   que no compitan con "Trabajemos juntos", que si es una accion. */
.eg-social { display: block; margin-top: 24px; }
.eg-social__botones { gap: 8px; }
/* Botones normales, como los pinta SobreMi.jsx (Button variant="secondary"):
   Inter 600 de 13px en caja normal. Los tenia en mono pequeña en versales para
   que no compitieran con "Trabajemos juntos", pero eso es una decision que el
   kit no toma y el usuario pidio fidelidad. */
.eg-social .wp-block-button__link {
  min-width: 0;
  padding: 0 12px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--eg-text);
}
.eg-social .wp-block-button__link:hover { color: var(--eg-text); }

/* --- La lista de datos escrita a mano (eg/fact-list).

   NO lleva la piel de la ficha tecnica. SobreMi.jsx pinta "Ficha · eneko.txt"
   con StatusList: filas planas con filete, etiqueta a la izquierda y valor a la
   derecha, sin caja hundida ni columna fija de 88px. La caja hundida es de la
   ficha de una atraccion, que es otro componente. */
.eg-fact-list { display: grid; gap: 0; }
.eg-fact-list > .wp-block-eg-fact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--eg-hairline);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.eg-fact-list > .wp-block-eg-fact-row:last-child { border-bottom: 0; }
.eg-fact-list .eg-spec-sheet__key { flex: none; color: var(--eg-text-mute); }
.eg-fact-list .eg-spec-sheet__value { text-align: right; color: var(--eg-text); }

/* --- /coasters/ a dos columnas en la vista de Top 10.

   El diseño pone la lista y, al lado, la ficha tecnica del numero 1. No es
   relleno: la pagina defiende un ranking y la ficha es la unica parte de la
   pantalla que enseña de donde salen los datos con los que se defiende. Sin
   ella, el punto de trazabilidad de cada fila no tiene a que referirse. */
.eg-ranking__top { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.eg-ranking__top > * { margin-block-start: 0; }

/* Por debajo de 900 la ficha baja, no se estrecha: a 320px ya es una columna de
   datos apretada, y a 160 seria ilegible. */
@media (max-width: 900px) {
  .eg-ranking__top { grid-template-columns: 1fr; }
}

/* --- Los parques, como fichas en rejilla de tres. */
.eg-ranking__parks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .eg-ranking__parks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .eg-ranking__parks { grid-template-columns: 1fr; } }
.eg-ranking__park { display: flex; }
.eg-ranking__park > .eg-window { flex: 1; }
.eg-ranking__park .eg-window__body { display: flex; flex-direction: column; gap: 6px; }

/* --- Cabecera de /coasters/: la cifra al lado del titular.

   La columna es `auto` y no fija: mide lo que mide el numero. Con los 140px que
   tenia antes reservaba sitio de mas y empujaba el titular 164px, que es lo que
   hizo que se apilara en su dia. Asi el desplazamiento es el ancho real de un
   "82", y ese desplazamiento ES la composicion: la plancha hace de margen de la
   pagina, no de primera linea del texto. */
.eg-coasters__titular {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.eg-coasters__titular > * { margin-block-start: 0; }

/* Por debajo de 700 se apila: a esa anchura la cifra se come media pantalla y
   el titular queda en una columna de cuatro palabras. */
@media (max-width: 700px) {
  .eg-coasters__titular { grid-template-columns: 1fr; gap: 8px; }
}

/* La linea del equipo iba pegada al recuento de parques por arriba y separada
   24px por abajo: el margen de flujo del nucleo, que no distingue entre una
   linea de contexto y un parrafo. Son la misma idea, van juntas. */
.eg-coasters__equipo { margin-top: 6px; }
.eg-coasters__titular .eg-label { display: block; }

/* --- "Lo que no hago": tres items, cada uno con su filete rojo.

   Era una frase con cuatro puntos. Una frase hay que terminarla; una lista se
   lee de un vistazo, y esta seccion cualifica tanto como el formulario: tiene
   que poder leerse sin querer. */
.eg-nope__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 6px;
}
.eg-nope__grid > * { margin-block-start: 0; }
.eg-nope__body {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--eg-error-text);
  font-size: 13px;
  line-height: 1.55;
  color: var(--eg-text-dim);
}
@media (max-width: 700px) { .eg-nope__grid { grid-template-columns: 1fr; } }

/* --- Pie del formulario: nota a la izquierda, acciones abajo a la derecha.

   El boton de enviar era de ancho completo. En una ventana de 600px eso es una
   barra de lado a lado, no un boton, y ademas dejaba la nota legal flotando
   debajo sin relacion con nada. El kit lo pone como el pie de un cuadro de
   dialogo, con la accion de confirmar la ultima por la derecha. */
.eg-enquiry__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.eg-enquiry__pie > * { margin-block-start: 0; }
.eg-enquiry__acciones { display: flex; gap: 8px; margin-left: auto; }
.eg-enquiry__submit { width: auto; margin-top: 0; }
.eg-enquiry__note { margin: 0; flex: 1 1 14rem; }

@media (max-width: 480px) {
  /* En pantalla estrecha las dos acciones ocupan la fila entera: a 375px, dos
     botones y una nota en la misma linea dejan la nota en cuatro palabras. */
  .eg-enquiry__acciones { width: 100%; }
  .eg-enquiry__acciones .eg-btn { flex: 1; }
}

/* --- Sin aire entre las piezas del marco.

   El nucleo mete el blockGap de la raiz (24px) entre cada hijo directo de
   .wp-site-blocks: entre la cabecera y el perfil de via, y entre el perfil de
   via y el <main>. Medido: 24 y 24. En el kit las tres piezas van pegadas
   -cabecera, via, contenido- porque son el marco de una misma ventana, y ese
   aire era lo que hacia que el hero empezara 48px mas abajo que en el kit. El
   aire dentro del contenido lo siguen poniendo los rellenos de cada seccion. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* --- Medida de lectura.

   reset.css del kit: `p { max-width: var(--eg-text-measure) }`, 68ch. Aqui no
   habia tope y la entradilla de /sobre-mi/ corria los 1120px del contenedor:
   dos lineas de 190 caracteres que el ojo pierde al volver. Se exceptua el
   cuerpo de las tarjetas, como hace el kit con .eg-card__body: dentro de una
   caja de 540px la medida la pone la caja. */
p { max-width: 68ch; }
.eg-service__desc,
.eg-window__body .eg-cta__body,
.eg-statusbar p,
/* El titulo del sitio va con nivel 0, o sea que core lo pinta como <p>, y la
   medida de lectura le caia encima: quedaba topado en 595px -68ch de la display
   a 14px- y su `flex: 1` no podia crecer. Con el titulo sin crecer, el
   justify-content:center que core emite para ese grupo tenia sobrante que
   repartir y se lo repartia a los DOS lados: la caja de sistema viajaba 251px
   hacia dentro y aparecia junto al titulo, a media barra. Lo vio el usuario el
   2026-09-15 en una captura. La medida de lectura es para parrafos de texto
   corrido, no para una barra de titulo de 28px. */
.eg-header__mark,
.eg-notice__text { max-width: none; }

/* ---------------------------------------------------------------------------
   Huecos de foto.

   El kit reserva cinco sitios para fotografia propia y, mientras no la hay,
   pinta un marco hundido con un caption que dice que deberia ir dentro. No es
   un defecto de entrega: es el estado honesto de una pagina a la que le falta
   una foto, y lo dice el handoff — "si no hay foto propia, va el hueco".
   --------------------------------------------------------------------------- */

/* Los huecos de foto que quedan son DOS, los dos de personas: el retrato de
   portada y la banda de /sobre-mi/. Los tres de coasters -la miniatura del
   ranking, el 4:3 de la rejilla de credits y el de la ficha tecnica- se fueron
   el 15/09: "las coasters no llevaran fotos, es imposible que haga fotos a
   todas". Con ellos se van sus medidas, que eran lo unico que quedaba aqui de
   .eg-ranking__thumb, .eg-credit-grid__media y .eg-spec-sheet__media. */
.eg-photo { display: block; overflow: hidden; }
.eg-photo__img,
.eg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Vacio: marco hundido y caption centrado, como .eg-sunk en el kit.

   Desde el 22/09 esto SOLO se ve en el editor -"pues si no hay foto oculta lo
   de la foto"-: en el sitio, un hueco sin imagen no pinta nada. Sigue aqui y no
   en una hoja aparte porque functions.php carga esta misma hoja como estilo del
   editor (add_editor_style), asi que quien pone la foto ve el hueco con la
   forma y el bisel que va a tener la foto. */
.eg-photo--vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--eg-surface-mid);
  border: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: var(--eg-bevel-sunk);
}
.eg-photo__label {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--eg-text-mute);
  text-align: center;
}

/* --- El hero, a dos columnas: texto y retrato (Home.jsx:10, 1fr 260px).

   Con la columna de la derecha puesta, la medida del titular y del parrafo la
   pone la rejilla. Por eso desaparecen de aqui los max-width a mano que
   emulaban esa columna cuando no existia: eran el parche de su ausencia. */
.eg-hero { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
.eg-hero > * { margin-block-start: 0; }
.eg-hero__texto > *:first-child { margin-block-start: 0; }
.eg-hero__retrato .eg-window__body { padding: 8px; }

/* El retrato del hero es CUADRADO, con foto y sin ella.
   Lo dijo quien hizo la foto el 22/09: "la foto esta pensada para ser
   cuadrada". Antes el hueco vacio media 186px de alto por los 242 de ancho de
   la columna, asi que el sitio reservado y la foto que iba a ir dentro tenian
   formas distintas: el hueco enseñaba un rectangulo y luego llegaba un
   cuadrado. La proporcion la fija aqui el CSS y no el atributo `height` del
   bloque, que en esta variante no se pinta (render.php lo explica). */
.eg-photo--hero { aspect-ratio: 1; }

@media (max-width: 900px) {
  /* El retrato baja debajo del texto, como dice el handoff en Responsive. */
  .eg-hero { grid-template-columns: 1fr; }
}

/* --- La banda de /sobre-mi/: 170px a sangre, sin marco lateral y con filete
       abajo (SobreMi.jsx:8). Rompe el contenedor a proposito: es la unica
       pieza del sitio que va de borde a borde.

   Y abre la pagina pegada a la cabecera. El relleno superior lo pone la
   plantilla compartida (page-pantalla, spacing|80) a las cuatro paginas que la
   usan, y una que empieza con una imagen a sangre no lo quiere: se descuenta
   con el MISMO token que lo pone, para que no se puedan separar. Si alguien
   cambia ese relleno en la plantilla, el portero de v5 lo dice — comprueba que
   la banda arranca donde acaba la cabecera. */
.eg-photo--band {
  border-inline: 0;
  border-top: 0;
  border-bottom: var(--eg-border-width) solid var(--eg-frame);
  box-shadow: none;
  margin-inline: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: 100vw;
  margin-top: calc(-1 * var(--wp--preset--spacing--80)) !important;
}

/* El alto de la banda CON foto dentro, que es la unica excepcion a "con la foto
   puesta manda la imagen" (render.php lo explica para el caso general).

   La banda va a 100vw, asi que su alto natural es el ancho de la ventana
   dividido por la proporcion del recorte. Con la foto de 1700x340 eso da 256px
   a 1280 -la medida del diseno mas un poco- pero 75px a 375, y a 75px de alto
   la persona de la foto ya no se distingue: la banda se lee como una cenefa.
   El suelo de 170px es la medida del hueco vacio, la que pide el diseno, y a
   esa altura el recorte de object-fit acerca la cara en lugar de encogerla.

   El techo evita lo contrario: sin el, un monitor de 2560 pinta una banda de
   512px que se come la pantalla antes del titular.

   20vw es exactamente la proporcion del recorte (1/5), asi que entre 850px y
   1300px de ventana el alto es el natural y la foto no se recorta nada. */
.eg-photo--band:not(.eg-photo--vacio) { height: clamp(170px, 20vw, 260px); }

/* ---------------------------------------------------------------------------
   El bloque de compartir del final de las entradas.

   Hasta el 2026-09-22 lo pintaba el plugin `machete`, modulo "social", con su
   marcado dentro del contenido; desde aqui solo se le podia poner ropa encima,
   y hacia falta: dos enlaces con fondo azul de Facebook, tipografia del sistema
   operativo y, delante de cada uno, el cuadrado de un glifo de
   "Machete-Social", una fuente de iconos que no llegaba a cargar y que el
   navegador pintaba como la casilla del caracter que falta.

   Ahora el marcado es nuestro -blocks/share- y no hay nada que tapar: los
   botones son los del sistema de diseño, .eg-btn. Sin iconos de marca, como en
   el resto del sitio, donde el logotipo es texto y los perfiles del pie son
   enlaces escritos. */
.eg-share { margin-top: 40px; }
.eg-share__titulo { margin: 0 0 12px; }
.eg-share__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.eg-share__lista li { margin: 0; }

/* El aviso de "copiado" reserva su alto desde el principio: si apareciera de
   la nada empujaria hacia abajo lo que hay debajo justo cuando alguien acaba
   de pulsar, que es el peor momento para mover la pagina. */
.eg-share__aviso {
  margin: 10px 0 0;
  min-height: 1.4em;
  font-size: var(--wp--preset--font-size--small);
  color: var(--eg-text-dim);
}