y ahora son un
dentro de otro
no es HTML válido). Sin esto el último párrafo sumaría sus 10px de Bootstrap a los 40 del .mg-lg y la portada se separaría un poco respecto a la de siempre. */ div.mg-sm > p:last-child, div.mg-md > p:last-child, div.mg-lg > p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- Contenido que se edita desde el panel: páginas nuevas y artículos del blog. Se usan los mismos colores de la marca que el resto del sitio (azul #064591, celeste #21c4f7) para que no se note el corte. --------------------------------------------------------------------------- */ .contenido-editable { font-size: 17px; line-height: 1.7; color: #303030; /* Hay artículos que pegan la URL entera como texto del enlace («http://www.revistaaen.es/index.php/aen/article/viewFile/16863/16733»). Eso no cabe en un móvil y se salía de la pantalla: que se parta cuando no quepa de otra manera. Con palabras normales no cambia nada. */ overflow-wrap: break-word; } .contenido-editable h2, .contenido-editable h3, .contenido-editable h4 { color: #064591; margin: 32px 0 14px; } .contenido-editable p { margin-bottom: 18px; } .contenido-editable a { color: #074591; text-decoration: underline; } .contenido-editable a:hover { color: #21c4f7; } .contenido-editable img { max-width: 100%; height: auto; } .contenido-editable figure { margin: 26px 0; } .contenido-editable figcaption { font-size: 14px; color: #6b6b6b; text-align: center; margin-top: 8px; } /* Citas. 150 de los 166 artículos traen un
pelado de WordPress y cada uno mete el autor a su manera (unaparte, un detrás de un
…). Se le da forma a la caja y no se toca nada de dentro. */ .contenido-editable blockquote { border-left: 4px solid #21c4f7; padding: 4px 0 4px 22px; margin: 30px 0; font-size: 18px; color: #3d4b5c; } .contenido-editable blockquote > :last-child { margin-bottom: 0; } /* La del editor, que sí sabemos cómo viene */ .contenido-editable blockquote.cita { font-style: italic; } .contenido-editable blockquote.cita cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: #6b6b6b; } .contenido-editable table { width: 100%; margin-bottom: 20px; } .contenido-editable table td, .contenido-editable table th { border: 1px solid #C4C6CA; padding: 8px; } /* Clases que venían de WordPress. Las imágenes que flotaban dentro del texto las conservan (son 140 en los artículos migrados), así que hay que respetarlas o el maquetado de esos artículos se rompe. */ .contenido-editable .alignleft { float: left; margin: 6px 24px 16px 0; } .contenido-editable .alignright { float: right; margin: 6px 0 16px 24px; } .contenido-editable .aligncenter { display: block; margin: 20px auto; } .contenido-editable .alignnone { margin: 16px 0; } .contenido-editable .wp-caption { max-width: 100%; margin-bottom: 20px; } .contenido-editable .wp-caption-text { font-size: 14px; color: #6b6b6b; text-align: center; margin-top: 6px; } /* --- Los bloques ----------------------------------------------------------- Lo que monta el editor por bloques (lib/contenido.php) y lo que trajo el importador de WordPress. No tenían ni una regla, y se notaba: los 11 artículos con vídeo enseñaban un iframe de 300×150 —un hueco en blanco en mitad del texto— y los 150 con cita salían con el gris de Bootstrap. */ /* Vídeo: 16:9 y todo el ancho de la columna. Se usa el truco del relleno en lugar de `aspect-ratio` porque en las tabletas de la academia puede haber un Safari que no lo entienda, y aquí fallar es quedarse sin ver la clase. */ .contenido-editable .bloque-video { position: relative; height: 0; padding-bottom: 56.25%; margin: 30px 0; background: #eef3f9; } .contenido-editable .bloque-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* --- Las fotos del artículo, centradas ------------------------------------ Las de WordPress vienen con el ancho de entonces (300, 390 o 580 px) y en una columna de 780 se quedaban pegadas a la izquierda, que es lo que se veía raro. Se centran todas MENOS las que flotan junto al texto (`alignleft` / `alignright`): esas están así a propósito. Va bajo `.pagina-articulo`, o sea SOLO en el blog: ni la portada, ni las seis páginas de siempre, ni el listado. */ .pagina-articulo .contenido-editable img:not(.alignleft):not(.alignright) { display: block; margin-left: auto; margin-right: auto; } /* Muchas fotos van dentro de un enlace (se pinchaba para verlas grandes). Un es de línea y se queda del ancho de la foto, así que centrar la foto dentro de él no la movería: se centra el enlace. ⚠️ El `:has(> img)` es imprescindible y no se puede quitar. Antes ponía solo `p > a:only-child`, y `:only-child` mira los ELEMENTOS hermanos, no el texto: en «En iKidz no podemos…» el enlace es el único elemento del párrafo, así que casaba. Resultado: el enlace se ponía en bloque y centrado, y la frase salía partida en tres líneas con la palabra suelta en medio. Se veía en cualquier artículo que enlazara algo dentro de una frase. */ .pagina-articulo .contenido-editable p > a:only-child:has(> img), .pagina-articulo .contenido-editable figure > a { display: block; text-align: center; } /* Una foto suelta: centrada, y sin estirarla si es pequeña */ .contenido-editable .bloque-imagen { margin: 30px 0; text-align: center; } .contenido-editable .bloque-imagen img { display: inline-block; } /* Galería: tantas por fila como quepan */ .contenido-editable .bloque-galeria { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0; } .contenido-editable .bloque-galeria a { flex: 1 1 200px; max-width: 100%; } .contenido-editable .bloque-galeria img { width: 100%; height: 170px; object-fit: cover; } .contenido-editable .bloque-boton { margin: 30px 0; } /* Listas: WordPress las dejaba pegadas y con la sangría de Bootstrap */ .contenido-editable ul, .contenido-editable ol { margin: 0 0 18px; padding-left: 26px; } .contenido-editable li { margin-bottom: 8px; } /* Ni un hueco de más al principio ni al final del texto */ .contenido-editable > :first-child { margin-top: 0; } .contenido-editable > :last-child { margin-bottom: 0; } /* Que un texto corto junto a una imagen flotante no se salga del bloque */ .contenido-editable::after { content: ""; display: table; clear: both; } /* Las 51 fotos que flotan junto al texto vienen de WordPress con sus anchos de entonces (hasta 580 px). En una columna de 780 eso deja renglones de 200 px, que no hay quien los lea: se les pone tope en la mitad. */ @media (min-width: 601px) { .contenido-editable .alignleft, .contenido-editable .alignright, .contenido-editable .wp-caption.alignleft, .contenido-editable .wp-caption.alignright { max-width: 50%; } } @media (max-width: 600px) { .contenido-editable .alignleft, .contenido-editable .alignright { float: none; display: block; margin: 16px auto; } } /* --- Listado del blog --------------------------------------------------- Bootstrap 3 no tiene flex: las columnas flotan, y en cuanto una tarjeta es más alta que sus vecinas las de la fila siguiente se enganchan en ella y dejan huecos enormes. Se arregla convirtiendo la fila en una rejilla flexible, que además iguala la altura de las tres tarjetas. Solo afecta al blog, que es donde está el problema. */ .rejilla-articulos { display: flex; flex-wrap: wrap; } .rejilla-articulos::before, .rejilla-articulos::after { display: none; /* el clearfix de Bootstrap estorba dentro de un flex */ } .articulo-columna { display: flex; margin-bottom: 34px; float: none; /* lo pone Bootstrap y rompe el flex */ } /* La tarjeta se estira hasta el alto de la más alta de su fila y empuja el botón al fondo, para que los tres «Seguir leyendo» queden alineados. */ .articulo-tarjeta { display: flex; flex-direction: column; width: 100%; } .articulo-cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; } .articulo-pie { margin-top: auto; margin-bottom: 0; padding-top: 10px; } .articulo-foto { display: block; margin-bottom: 14px; } .articulo-tarjeta img { width: 100%; height: 190px; object-fit: cover; } /* Los dos artículos que no llevan ninguna foto: en vez de dejar la tarjeta descuadrada, un hueco del celeste de la marca. */ .articulo-sin-foto { display: flex; align-items: center; justify-content: center; height: 190px; background: #21c4f7; color: #fff; font-family: "Dosis", system-ui, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: 3px; } .articulo-tarjeta h3 { font-size: 20px; line-height: 1.3; margin-top: 0; } .articulo-tarjeta h3 a { color: #074591; } .articulo-tarjeta h3 a:hover { color: #21c4f7; text-decoration: none; } .articulo-extracto { margin-bottom: 0; } .articulo-datos { font-size: 14px; color: #6b6b6b; margin-bottom: 12px; } .paginacion-blog .btn { margin: 0 10px; } .paginacion-cuenta { display: inline-block; font-size: 14px; color: #6b6b6b; margin: 0 10px; } /* --- Un artículo --------------------------------------------------------- El blog es sección nueva, así que aquí no hay diseño anterior que respetar. Una línea de 1.200 px es incómoda de leer: el artículo entero va en una columna de 780 px, que son unos 75 caracteres. El ancho se pone UNA vez y en el contenedor, no elemento a elemento como antes. Antes la cabecera salía centrada y el cuerpo pegado a la izquierda, 210 px más allá, porque el cuerpo ERA una columna de Bootstrap y lo que flota no se centra con `margin: auto`. La plantilla ya no usa filas ni columnas dentro del artículo (ver el comentario de blog-articulo.php). */ .pagina-articulo .articulo { max-width: 780px; margin: 0 auto; overflow-wrap: break-word; /* títulos y etiquetas largos, igual que el texto */ } /* La raya de debajo del título, más suave que la negra de la plantilla */ .pagina-articulo .divider-h span { border-top: 1px solid #d7dce4; } /* La foto de cabecera, cuando el artículo tiene una */ .articulo-imagen { margin: 30px 0 0; } .articulo-imagen img { display: block; width: 100%; height: auto; } .pagina-articulo .contenido-editable, .articulo-terminos { margin-top: 30px; } .articulo-comentarios { margin-top: 30px; } .migas { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .migas a { color: #21c4f7; } .articulo-terminos .termino { display: inline-block; background: #f2f6fb; color: #074591; border-radius: 14px; padding: 4px 14px; margin: 0 6px 8px 0; font-size: 14px; } .articulo-terminos .termino:hover { background: #21c4f7; color: #fff; text-decoration: none; } /* El pie del artículo: al anterior y al siguiente */ .articulo-vecinos { display: flex; flex-wrap: wrap; gap: 20px; border-top: 1px solid #e4e7ec; margin-top: 30px; padding-top: 22px; font-size: 15px; } .vecino { flex: 1 1 0; min-width: 220px; color: #074591; } .vecino:hover, .vecino:focus { color: #21c4f7; text-decoration: none; } /* Cuando solo hay siguiente, que se vaya al borde derecho igualmente */ .vecino-siguiente { margin-left: auto; text-align: right; } .vecino-etiqueta { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #6b6b6b; margin-bottom: 4px; } .vecino-titulo { display: block; font-weight: 700; line-height: 1.3; } /* --- Comentarios (migrados, ocultos hasta que Cristina decida) --- */ .comentario { border-bottom: 1px solid #e4e7ec; padding: 16px 0; } .comentario-respuesta { margin-left: 34px; border-bottom: 0; border-left: 3px solid #e4e7ec; padding-left: 16px; } .comentario-autor { font-weight: 700; color: #074591; margin-bottom: 6px; } .comentario-fecha { font-weight: 400; font-size: 13px; color: #6b6b6b; margin-left: 8px; } @media (max-width: 767px) { .rejilla-articulos { display: block; /* apiladas, no hace falta igualar alturas */ } .articulo-columna { display: block; } .articulo-tarjeta img, .articulo-sin-foto { height: 200px; } .articulo-vecinos { display: block; /* uno debajo del otro, los dos a la izquierda */ } .vecino + .vecino { margin-top: 18px; } .vecino-siguiente { text-align: left; } } /* --- La barra de scroll horizontal de la portada (defecto heredado) ------ El bloque del banner de cabecera lleva la clase `full-width-bloc` de Blocs, que pone su `.container` al 100 % del ancho y sin padding. Dentro va un `.row` de Bootstrap, que compensa el padding de las columnas con un margen de -15 px a cada lado… y como el contenedor ya está pegado al borde, esos 15 px se salen de la pantalla: 1381 px de contenido en una ventana de 1366, o sea barra de scroll horizontal en toda la portada. Viene de la web de siempre —medido en la copia de producción, mismo 1381—, no de la refactorización. Se quitan los dos márgenes negativos y, a la vez, el padding de las columnas que compensaban: así el contenido sigue tocando los bordes exactamente igual que antes, pero sin salirse. */ .full-width-bloc .container > .row { margin-left: 0; margin-right: 0; } .full-width-bloc .container > .row > [class*="col-"] { padding-left: 0; padding-right: 0; } /* --- El menú del blog ----------------------------------------------------- «Vamos Creciendo» tenía un menú con Inicio, Mis productos, Opiniones y Sobre mí. Las tres páginas se migraron el 21/09 pero sin menú: existían y contestaban, y aun así no había manera de llegar a ellas si no te sabías la dirección. Se pinta como una barra propia, lo primero del container y SIEMPRE en el mismo sitio: en el listado, en un artículo y en una página. La primera versión lo metía dentro de la columna de cada plantilla y caía a distinta altura según dónde estuvieras, que es lo que daba la sensación de que la página se movía al navegar. */ .blog-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 0 40px; padding: 7px; background: #f2f6fb; border-radius: 30px; } .blog-menu a { display: block; padding: 9px 22px; border-radius: 22px; color: #074591; font-weight: 600; font-size: 15px; letter-spacing: .01em; line-height: 1.2; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .blog-menu a:hover, .blog-menu a:focus { background: #e1ecf8; color: #074591; text-decoration: none; } /* Dónde estamos: pastilla llena, que se ve de un vistazo y no depende del color, que era el problema del subrayado fino de la primera versión. */ .blog-menu a.activo, .blog-menu a.activo:hover, .blog-menu a.activo:focus { background: #21c4f7; color: #fff; box-shadow: 0 2px 8px rgba(33, 196, 247, .35); } /* Leyendo un artículo o mirando una categoría estás dentro del blog pero no en su portada: se marca «Inicio» más flojo, para orientar sin mentir. */ .blog-menu a.en-seccion { background: #dceefb; color: #074591; } .blog-menu a.en-seccion:hover, .blog-menu a.en-seccion:focus { background: #cde5fa; color: #074591; } @media (max-width: 500px) { .blog-menu { border-radius: 22px; } .blog-menu a { padding: 8px 15px; font-size: 14px; } } /* --- Compartir un artículo ------------------------------------------------ El blog viejo tenía Facebook y Twitter al pie de cada entrada. Se reponen, y se añade WhatsApp, que es por donde se mueven de verdad las recomendaciones entre padres. Son enlaces normales, sin JavaScript y sin scripts de las redes: hasta que alguien pulsa, no se pide nada a nadie. Es lo coherente con haber quitado Google Fonts y cdnjs de toda la web. */ .articulo-compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 38px 0 0; padding-top: 22px; border-top: 1px solid #e4e7ec; } .articulo-compartir .compartir-etiqueta { margin: 0 4px 0 0; color: #6b6b6b; font-size: 14px; font-weight: 600; } .articulo-compartir a { display: inline-block; padding: 7px 16px; border-radius: 18px; background: #f2f6fb; color: #074591; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .articulo-compartir a:hover, .articulo-compartir a:focus { background: #21c4f7; color: #fff; text-decoration: none; } /* --- Fichas de producto --------------------------------------------------- Para «Mis productos» del blog, que era una columna de portadas enormes una debajo de otra con un «pincha sobre la imagen» como única instrucción: no se sabía qué era cada cosa, ni cuál era gratis, ni que la imagen era un enlace. Las clases son genéricas y viven en `.contenido-editable`, así que Cristina puede reutilizarlas en cualquier página que cree desde el panel. */ .contenido-editable .fichas { display: grid; /* El máximo de 340 px es lo que evita que un grupo de una sola ficha («Cuadernos», «Apps») se estire a los 780 px de la columna y saque la portada a un tamaño desproporcionado. */ grid-template-columns: repeat(auto-fit, minmax(230px, 340px)); justify-content: start; gap: 26px; margin: 26px 0 44px; padding: 0; list-style: none; } .contenido-editable .ficha { display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; } .contenido-editable .ficha:hover { box-shadow: 0 10px 26px rgba(7, 69, 145, .13); transform: translateY(-3px); } /* La portada, en una caja de proporción fija: así las fichas de una misma fila quedan alineadas aunque las imágenes originales midan distinto (las hay de 260×368 y de 300×217). */ .contenido-editable .ficha-foto { display: flex; align-items: center; justify-content: center; padding: 22px 22px 0; background: #f7fafd; min-height: 210px; } .contenido-editable .ficha-foto img { max-width: 100%; max-height: 230px; width: auto; height: auto; margin: 0; border-radius: 4px; box-shadow: 0 3px 12px rgba(0, 0, 0, .12); } .contenido-editable .ficha-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .contenido-editable .ficha-cuerpo h4 { margin: 0 0 8px; color: #074591; font-size: 18px; line-height: 1.3; } .contenido-editable .ficha-cuerpo p { margin: 0 0 16px; color: #6b6b6b; font-size: 14.5px; line-height: 1.5; } /* Empuja los botones abajo: quedan alineados entre fichas de distinto alto */ .contenido-editable .ficha-botones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; } .contenido-editable .ficha-botones a { flex: 1 1 auto; padding: 9px 16px; border-radius: 22px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .contenido-editable .ficha-botones .boton-principal { background: #21c4f7; color: #fff; } .contenido-editable .ficha-botones .boton-principal:hover, .contenido-editable .ficha-botones .boton-principal:focus { background: #0fb3e6; color: #fff; text-decoration: none; } .contenido-editable .ficha-botones .boton-suave { background: #f2f6fb; color: #074591; border: 1px solid #dde5f0; } .contenido-editable .ficha-botones .boton-suave:hover, .contenido-editable .ficha-botones .boton-suave:focus { background: #e1ecf8; color: #074591; text-decoration: none; } /* «Gratis», «De pago»… una etiqueta pequeña sobre el título */ .contenido-editable .ficha-marca { display: inline-block; /* Sin esto se estira al ancho de la ficha: el contenedor es un flex en columna y un hijo ocupa todo el ancho salvo que se le diga que no. */ align-self: flex-start; margin: 0 0 9px; padding: 3px 10px; border-radius: 11px; background: #e8f8ec; color: #1f7a3d; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .contenido-editable .ficha-marca.marca-azul { background: #e7f1fd; color: #074591; } /* Un encabezado de grupo dentro de la página */ .contenido-editable .grupo-titulo { margin: 40px 0 4px; padding-bottom: 10px; border-bottom: 2px solid #e4e7ec; color: #074591; font-size: 21px; } .contenido-editable .grupo-titulo:first-child { margin-top: 0; }