/* Maqueta 3: Logotipo horizontal. Cabecera blanca con el logotipo horizontal de
   2010, el buscador al centro y las tres vias de contacto a la derecha. La
   portada abre con el heroe a todo el ancho del contenido y las seis familias
   debajo, de a tres. Productos en tarjetas. */
.d3 .franja .ancho { justify-content: flex-start; }
.d3 .heroe.a-lo-ancho .heroe-txt { padding: 32px; }
.d3 .heroe.a-lo-ancho .bajada { max-width: 62ch; }

@media (max-width: 980px) {
  /* La franja solo lleva la frase, que en angosto no se muestra. */
  .d3 .franja { display: none; }
}
@media (max-width: 560px) {
  .d3 .heroe.a-lo-ancho .heroe-txt { padding: 20px; }
  /* Logotipo arriba y, debajo, las tres vias de contacto en dos lineas. */
  .d3 .cab { grid-template-columns: minmax(0, 1fr); }
  .d3 .cab-contacto { grid-row: auto; grid-column: 1; justify-content: flex-start; }
  .d3 .contactos.en-cabecera { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .d3 .contactos.en-cabecera a { display: inline; }
  .d3 .contactos.en-cabecera .c-rot { margin-right: .3em; font-size: inherit; text-transform: none; letter-spacing: 0; }
  .d3 .contactos.en-cabecera .c-fono a { font-size: inherit; }
  .d3 .contactos.en-cabecera .c-mail { order: 3; }
}