/* ==========================================================================
   /coldvector/ y /en/coldvector/ con el estilo de la presentacion PDF.
   Solo lo cargan esas dos paginas (via $extra_head); el resto del sitio sigue
   con css/estilo.css a secas. Todo va dentro de .p para no tocar la cabecera
   ni el pie, que siguen siendo los del sitio.
   Colores sacados del propio PDF (operadores de color de sus paginas).
   Letras del PDF: Arial Bold en titulos y Calibri en texto; las dos vienen
   con Windows. Donde no estan, caen en Liberation Sans / Carlito (sus
   equivalentes metricos) y despues en las fuentes del sitio.
   ========================================================================== */
.p {
  --p-noche:     #0A1A2F;   /* diapositivas oscuras                       */
  --p-panel:     #12304F;   /* paneles sobre lo oscuro                    */
  --p-azul:      #2E7DD7;   /* circulos, cifras grandes. 4.2:1 sobre blanco:
                               NO lleva texto chico encima ni se usa para
                               texto chico                                */
  --p-azul-txt:  #2569B8;   /* el mismo azul para texto chico y botones (5.5:1) */
  --p-celeste:   #8CCBF5;   /* cifras y etiquetas sobre lo oscuro (10:1)  */
  --p-hielo:     #EEF4FA;   /* tarjetas claras                            */
  --p-fondo-2:   #F6F9FC;   /* seccion clara alterna                      */
  --p-gris:      #5B6B7F;   /* texto secundario (5.5:1)                   */
  --p-gris-osc:  #B8C6D6;   /* texto secundario sobre lo oscuro (10:1)    */
  --p-naranja:   #F26B21;   /* SOLO el huracan, y solo en grande          */
  --p-radio:     10px;
  --p-titulo: Arial, "Liberation Sans", Helvetica, sans-serif;
  --p-texto:  Calibri, Carlito, "Source Sans 3", system-ui, sans-serif;

  font-family: var(--p-texto);
  color: var(--p-noche);
}
.p section { padding-block: 4rem; }
@media (min-width: 48rem) { .p section { padding-block: 5.5rem; } }
.p-ancho { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 62rem) { .p-ancho { padding-inline: 2.5rem; } }

.p h1, .p h2, .p h3 {
  font-family: var(--p-titulo); font-weight: 700; font-stretch: normal;
  letter-spacing: -.01em; color: var(--p-noche);
}
.p h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.1; margin-bottom: .75rem; }
.p h3 { font-size: 1.2rem; line-height: 1.25; }
.p p, .p li, .p dd { font-family: var(--p-texto); }
.p-sub { color: var(--p-gris); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; max-width: 50rem; margin-bottom: 0; }
.p-etq {
  font-family: var(--p-texto); font-weight: 700; font-size: .8rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--p-azul-txt); margin: 0 0 .6rem;
}
.p-nota { color: var(--p-gris); font-size: .98rem; }
.p-pie { margin: 1.75rem 0 0; color: var(--p-gris); font-style: italic; font-size: .98rem; }

/* Secciones */
.p-claro  { background: #fff; }
.p-suave  { background: var(--p-fondo-2); }
.p-oscuro { background: var(--p-noche); color: #fff; }
.p-oscuro h2, .p-oscuro h3 { color: #fff; }
.p-oscuro .p-sub, .p-oscuro p { color: var(--p-gris-osc); }
.p-oscuro .p-etq { color: var(--p-celeste); }

/* Circulo azul con icono blanco: la firma visual de la presentacion */
.p-circulo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--p-azul); color: #fff;
  box-shadow: 0 0 0 5px rgba(46, 125, 215, .14);
}
.p-circulo-claro { background: #8CCBF5; color: var(--p-noche); box-shadow: 0 0 0 5px rgba(140, 203, 245, .18); }
.p-circulo-naranja { background: var(--p-naranja); box-shadow: 0 0 0 5px rgba(242, 107, 33, .15); }

/* Botones redondeados, como las etiquetas del PDF */
.p .boton { border-radius: 8px; }
.p-boton { background: var(--p-azul-txt); border-color: var(--p-azul-txt); color: #fff; }
.p-boton:hover { background: #1D5596; border-color: #1D5596; color: #fff; }
.p-boton-borde { background: #fff; border-color: #C9D6E4; color: var(--p-noche); }
.p-boton-borde:hover { border-color: var(--p-azul-txt); color: var(--p-azul-txt); }
.p-boton-blanco { background: #fff; border-color: #fff; color: var(--p-noche); }
.p-boton-blanco:hover { background: var(--p-hielo); border-color: var(--p-hielo); color: var(--p-noche); }

/* --- 1. Portada -----------------------------------------------------------
   Dentro del contenedor, no a sangre: en pantallas de 1920 px una foto que
   llega al borde de la ventana deja el sitio cargado a la derecha (lo vio el
   cliente, 2026-10-22). La foto lleva las esquinas de las tarjetas del PDF. */
.p .p-hero {
  padding-block: 2.5rem 3.5rem;
  background: linear-gradient(168deg, #FFFFFF 0%, #F8FBFD 50%, #EEF4FA 100%);
}
.p-hero-rejilla { display: grid; gap: 2.5rem; }
.p-hero-in { height: 4rem; width: auto; margin: 0 0 1.75rem; align-self: flex-start; }
/* ColdVector va subordinado: siempre mas chico que la marca de la cabecera
   (42 px) y que el logotipo de Ingeniero Navidad de arriba. */
.p-hero-logo { height: 2.5rem; width: auto; margin: .25rem 0 1.25rem; align-self: flex-start; }
.p-hero-lema { font-size: 1.15rem; color: var(--p-noche); margin-bottom: 1.5rem; }
.p-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.15; letter-spacing: -.015em; margin-bottom: 1.25rem;
}
.p-hero h1 span { color: var(--p-azul); }
.p-hero-firma { color: var(--p-gris); font-size: 1.02rem; margin-bottom: 0; }
.p-hero-foto { margin: 0; }
.p-hero-foto img {
  width: 100%; height: auto; border-radius: var(--p-radio);
  box-shadow: 0 18px 44px rgba(10, 26, 47, .16);
}
@media (min-width: 62rem) {
  .p .p-hero { padding-block: 4rem 4.5rem; }
  .p-hero-rejilla { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
  .p-hero-texto { display: flex; flex-direction: column; }
  .p-hero-in { height: 5rem; }
  /* Alta y recortada desde arriba a la derecha, donde va la marca de agua. */
  .p-hero-foto img { aspect-ratio: 5 / 4; object-fit: cover; object-position: right top; }
}

/* --- Tira de cifras ------------------------------------------------------- */
.p-tira { background: var(--p-noche); padding-block: 0 !important; }
.p-tira ul { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 62rem) { .p-tira ul { grid-template-columns: repeat(4, 1fr); } }
.p-tira li { margin: 0; padding: 1.75rem 1rem; text-align: center; }
@media (min-width: 62rem) { .p-tira li + li { border-left: 1px solid rgba(140, 203, 245, .2); } }
.p-tira a { text-decoration: none; display: block; }
.p-tira b { display: block; font-family: var(--p-titulo); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; color: var(--p-celeste); }
.p-tira span { display: block; margin-top: .5rem; font-family: var(--p-texto); font-size: .95rem; color: var(--p-gris-osc); line-height: 1.35; }
.p-tira a:hover b { color: #fff; }

/* --- 2. Pasos con circulos unidos por linea punteada ---------------------- */
.p-pasos { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 2rem; }
@media (min-width: 40rem) { .p-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .p-pasos { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }
.p-pasos li { position: relative; margin: 0; }
@media (min-width: 62rem) {
  .p-pasos li:not(:last-child)::after {
    content: ""; position: absolute; top: 1.75rem; left: 4.5rem; right: -1.5rem;
    border-top: 2px dashed #8CCBF5;
  }
}
.p-pasos .p-circulo { margin-bottom: 1.5rem; }
.p-pasos h3 { margin-bottom: .45rem; }
.p-pasos p { color: var(--p-gris); margin: 0; font-size: 1.02rem; line-height: 1.45; }

.p-modelo { display: grid; gap: 1.5rem; margin-top: 3.5rem; align-items: stretch; }
@media (min-width: 62rem) { .p-modelo { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.p-foto-tarjeta {
  margin: 0; display: flex; align-items: center;
  background: #fff; border: 1px solid #DCE5EF; border-radius: var(--p-radio);
  padding: .9rem; box-shadow: 0 10px 30px rgba(10, 26, 47, .07);
}
.p-foto-tarjeta img { width: 100%; height: auto; border-radius: 4px; }
.p-panel-oscuro {
  background: var(--p-noche); color: #fff; border-radius: var(--p-radio);
  padding: 2rem 2rem; display: flex; flex-direction: column; justify-content: center;
}
.p-panel-oscuro .p-etq { color: var(--p-celeste); }
.p-panel-titulo { font-family: var(--p-titulo); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.3; color: #fff; margin-bottom: .75rem; }
.p-panel-sub { color: var(--p-celeste); margin: 0; font-size: 1.05rem; }

/* --- 3. Tarjetas ---------------------------------------------------------- */
.p-dos { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .p-dos { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.p-tres { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .p-tres { grid-template-columns: repeat(3, 1fr); } }
.p-tarjeta {
  display: flex; flex-direction: column;
  background: var(--p-hielo); border-radius: var(--p-radio); padding: 2.25rem 2rem;
}
.p-claro .p-tarjeta { background: var(--p-hielo); }
.p-suave .p-tarjeta { background: #fff; box-shadow: 0 10px 30px rgba(10, 26, 47, .06); }
.p-tarjeta-cabeza { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.p-tarjeta-cabeza h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 0; }
.p-tarjeta-cabeza .p-etq { margin-bottom: .25rem; }
.p-tarjeta-lema { font-weight: 700; color: var(--p-azul-txt); font-size: 1.15rem; line-height: 1.4; margin-bottom: 1.25rem; }
.p-tarjeta .boton { margin-top: auto; align-self: flex-start; }
.p-tarjeta-oscura { background: var(--p-noche) !important; color: #fff; }
.p-tarjeta-oscura h3 { color: #fff; }
.p-tarjeta-oscura .p-etq, .p-tarjeta-oscura .p-tarjeta-lema { color: var(--p-celeste); }

.p-checks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.p-checks li { display: flex; gap: .85rem; align-items: flex-start; margin: 0; padding: .55rem 0; font-size: 1.08rem; line-height: 1.4; }
.p-check { flex: none; color: var(--p-azul); margin-top: .1rem; }
.p-tarjeta-oscura .p-checks li { color: #fff; }
.p-tarjeta-oscura .p-check { color: var(--p-celeste); }

/* Normas */
.p-tres .p-circulo { margin-bottom: 1.5rem; }
.p-norma { font-family: var(--p-titulo); font-weight: 700; font-size: 1.4rem; margin: .1rem 0 .6rem; color: var(--p-noche); }
.p-normas-lista { list-style: none; padding: 0; margin: .25rem 0 0; }
.p-normas-lista li { font-weight: 700; font-size: 1.08rem; margin: 0 0 .5rem; color: var(--p-noche); }

/* --- 4. Boceto y plano ---------------------------------------------------- */
.p-boceto { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .p-boceto { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.p-def { margin: 2rem 0 0; }
.p-def dt { font-weight: 700; color: var(--p-celeste); font-size: 1.1rem; margin-top: 1.25rem; font-family: var(--p-texto); }
.p-def dd { margin: .2rem 0 0; color: #fff; font-size: 1.05rem; }
.p-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.p-mosaico figure, .p-obra figure { position: relative; margin: 0; overflow: hidden; border-radius: 6px; }
/* Proporciones casi iguales (~1.5): se igualan con el recorte anclado arriba a
   la derecha, donde esta la marca de agua. */
.p-mosaico img, .p-obra img {
  width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: right top;
  transition: transform .45s ease;
}
.p-mosaico figcaption, .p-obra figcaption {
  position: absolute; left: .75rem; bottom: .75rem; margin: 0;
  background: var(--p-noche); color: #fff; border-radius: 6px;
  padding: .4rem .8rem; font-family: var(--p-texto); font-weight: 700; font-size: .85rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.p-obra figcaption { left: 50%; transform: translateX(-50%); white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: .92rem; }
.p-mosaico figure:hover img, .p-obra figure:hover img { transform: scale(1.04); }

.p-plano { display: grid; margin-top: 4rem; }
.p .p-sin-pie { padding-bottom: 0; }
.p-plano-texto { padding: 2rem 1.25rem; }
.p-plano figure { margin: 0; }
.p-plano img { width: 100%; height: auto; }
@media (min-width: 62rem) {
  .p-plano { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: stretch; }
  .p-plano-texto {
    display: flex; flex-direction: column; justify-content: center; background: var(--p-panel);
    padding: 3rem 3rem 3rem max(2.5rem, calc((100vw - var(--ancho)) / 2 + 2.5rem));
  }
  .p-plano figure { position: relative; min-height: 26rem; }
  .p-plano img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: right top; }
}
.p-plano-titulo { font-family: var(--p-titulo); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; color: #fff !important; margin-bottom: 1rem; }

/* --- 6. Energia ----------------------------------------------------------- */
.p-etq-sub { margin-top: -.1rem; }
.p-ahorros { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .p-ahorros { grid-template-columns: 1fr 1fr; } }
.p-ahorro {
  display: flex; gap: 1.75rem; align-items: center;
  background: var(--p-panel); border-radius: var(--p-radio); padding: 2rem;
}
.p-pct { font-family: var(--p-titulo); font-weight: 700; font-size: clamp(3.5rem, 7vw, 5rem); line-height: 1; color: var(--p-celeste) !important; margin: 0; flex: none; }
.p-ahorro h3 { margin-bottom: .35rem; }
.p-ahorro p:not(.p-pct) { margin: 0; color: var(--p-gris-osc); }
.p-ahorro-vivo { background: var(--p-azul-txt); }
.p-ahorro-vivo .p-pct { color: #fff !important; }
.p-ahorro-vivo p:not(.p-pct) { color: #fff !important; }
.p-beneficios { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 1.25rem 2rem; }
@media (min-width: 40rem) { .p-beneficios { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .p-beneficios { grid-template-columns: repeat(3, 1fr); } }
.p-beneficios li { display: flex; gap: 1rem; align-items: center; margin: 0; color: #fff; font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.p-beneficios .p-circulo { width: 3rem; height: 3rem; }

/* --- 7. Control ----------------------------------------------------------- */
.p-control { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .p-control { grid-template-columns: 1.15fr .85fr; gap: 4rem; } }
.p-control-fotos { display: grid; grid-template-columns: .62fr 1fr; gap: 1rem; }
.p-control-fotos figure { margin: 0; border-radius: 6px; overflow: hidden; }
.p-control-fotos img { width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.p-control-alta { grid-row: span 2; }
.p-iconos-lista { list-style: none; padding: 0; margin: 2rem 0 0; }
.p-iconos-lista li { display: flex; gap: 1.25rem; align-items: flex-start; margin: 0 0 1.75rem; }
.p-iconos-lista h3 { margin-bottom: .3rem; }
.p-iconos-lista p { color: var(--p-gris); margin: 0; }

/* --- 8. Obra -------------------------------------------------------------- */
.p-obra { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .p-obra { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .p-obra { grid-template-columns: repeat(3, 1fr); } }
.p-montaje { display: grid; gap: 1.25rem; margin-top: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 62rem) { .p-montaje { grid-template-columns: 1fr 1fr 1fr; } }
.p-montaje figure { margin: 0; border-radius: 6px; overflow: hidden; }
.p-montaje img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: right top; }
.p-montaje .p-panel-oscuro { grid-column: 1 / -1; padding: 2.5rem; }
@media (min-width: 62rem) { .p-montaje .p-panel-oscuro { grid-column: auto; } }
.p-checks-grandes li { color: var(--p-celeste); font-weight: 700; font-size: 1.2rem; }
.p-checks-grandes .p-check { width: 28px; height: 28px; background: var(--p-azul); color: #fff; border-radius: 50%; padding: 5px; }

/* --- 9. Paises ------------------------------------------------------------ */
.p-paises { display: grid; gap: 2.5rem; margin-top: 2rem; align-items: center; }
@media (min-width: 62rem) { .p-paises { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.p-gigante { font-family: var(--p-titulo); font-weight: 700; font-size: clamp(5rem, 12vw, 8.5rem); line-height: .9; color: var(--p-celeste) !important; margin: 0 0 1rem; letter-spacing: -.03em; }
.p-gigante-etq { font-weight: 700; color: #fff !important; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.35; max-width: 26ch; }
.p-pais { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .65rem; }
.p-pais li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0;
  background: var(--p-panel); border-radius: 8px; padding: 1rem 1.25rem;
}
.p-pais li::before {
  content: ""; width: 14px; height: 18px; flex: none; margin-right: -.25rem;
  background: var(--p-celeste);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 0a12 12 0 0 0-12 12c0 9 12 18 12 18s12-9 12-18A12 12 0 0 0 12 0zm0 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 0a12 12 0 0 0-12 12c0 9 12 18 12 18s12-9 12-18A12 12 0 0 0 12 0zm0 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-pais span { font-weight: 700; font-size: 1.15rem; color: #fff; margin-right: auto; }
.p-pais b { color: var(--p-celeste); font-size: 1.02rem; }
.p-pais .p-pais-vivo { background: var(--p-azul-txt); }
.p-pais .p-pais-vivo::before { background: #fff; }
.p-pais .p-pais-vivo b { color: #fff; }
.p-pie-oscuro { font-style: italic; color: var(--p-celeste) !important; font-size: .98rem; }

/* --- 10. Caso ------------------------------------------------------------- */
.p-caso { display: grid; gap: 3rem; margin-top: 2rem; align-items: center; }
@media (min-width: 62rem) { .p-caso { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.p-caso-fotos { position: relative; padding-bottom: 2rem; }
.p-caso-fotos figure { margin: 0; }
.p-caso-foto img { width: 100%; height: auto; border-radius: 8px; }
/* La satelital va encimada abajo a la derecha, como en el PDF; la marca de
   agua de la foto de la camara esta arriba a la derecha y queda libre. */
.p-caso-nasa {
  position: absolute; right: 1rem; bottom: 3rem; width: 44%;
  border: 5px solid #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(10, 26, 47, .28);
}
.p-caso-nasa img { width: 100%; height: auto; display: block; }
.p-credito { position: absolute; left: 0; bottom: 0; margin: 0; font-size: .92rem; color: var(--p-gris); }
.p-hechos { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.p-hechos li { display: flex; gap: 1.1rem; align-items: center; margin: 0 0 1.25rem; }
.p-hechos b { display: block; font-family: var(--p-titulo); font-size: 1.5rem; color: var(--p-noche); line-height: 1.1; }
.p-hechos .p-naranja { color: #C24E0E; }   /* el naranja del PDF, bajado a 4.8:1 para que se lea */
.p-hechos div span { color: var(--p-gris); }   /* div: el circulo tambien es un span */
.p-alcance { background: var(--p-hielo); border-radius: var(--p-radio); padding: 1.25rem 1.5rem; font-size: 1.05rem; margin-bottom: 1.75rem; }

/* --- 11. Confianza -------------------------------------------------------- */
.p-barra {
  display: flex; gap: 2rem; align-items: center; margin-top: 2.5rem;
  background: var(--p-noche); border-radius: var(--p-radio); padding: 1.75rem 2.25rem;
}
.p-barra b { font-family: var(--p-titulo); font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--p-celeste); line-height: 1; flex: none; }
.p-barra p { margin: 0; color: var(--p-celeste); font-size: 1.1rem; }
.p-barra strong { color: #fff; }

/* --- 12. Cierre ----------------------------------------------------------- */
.p-cierre { text-align: center; }
.p-cierre h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
.p-cierre .boton-grupo { justify-content: center; }
/* El logo de ColdVector, mas chico que el de Ingeniero Navidad */
.p-marcas {
  display: inline-flex; align-items: center; gap: 1rem; margin-top: 3rem; max-width: 100%;
  background: #fff; border-radius: var(--p-radio); padding: .9rem 1.1rem;
}
.p-marcas img { min-width: 0; }
.p-marcas img:first-child { height: 1.75rem; width: auto; }
.p-marcas img:last-child { height: 2.5rem; width: auto; }
@media (min-width: 40rem) {
  .p-marcas { gap: 1.75rem; padding: 1.1rem 1.75rem; }
  .p-marcas img:first-child { height: 2.5rem; }
  .p-marcas img:last-child { height: 3.5rem; }
}
.p-marcas span { width: 1px; align-self: stretch; background: #DCE5EF; }
.p-contacto { list-style: none; padding: 0; margin: 3rem auto 0; max-width: 54rem; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .p-contacto { grid-template-columns: repeat(3, 1fr); } }
.p-contacto li { margin: 0; background: var(--p-panel); border-radius: 8px; padding: 1.1rem; }
.p-contacto span { display: block; font-weight: 700; font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; color: var(--p-celeste); margin-bottom: .3rem; }
.p-contacto a { color: #fff; font-size: 1.05rem; }
.p-contacto a:hover { color: var(--p-celeste); }

@media (prefers-reduced-motion: reduce) {
  .p-mosaico figure:hover img, .p-obra figure:hover img { transform: none; }
}

/* Impresion: los bloques oscuros salen en blanco, como el resto del sitio. */
@media print {
  .p-oscuro, .p-tira, .p-panel-oscuro, .p-tarjeta-oscura, .p-ahorro, .p-barra, .p-pais li, .p-contacto li { background: #fff !important; }
  .p *, .p-oscuro h2, .p-oscuro h3, .p-oscuro p { color: #000 !important; }
  .p-plano img { position: static !important; height: auto !important; }
}