/*!
Theme Name: iagofer
Theme URI: http://underscores.me/
Author: Iago Fernández
Author URI: https://guerz.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: iagofer
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

iagofer is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
#Anadido por mi
    - Título página principal oculto
    - Menu
    - Footer
    - Alineación y ancho de bloques
    - Estilos Generales, fuentes y personalizaciones
    - Hero Primera sección y Recurso animado Ver Mas
    - Areas de Especialización Seccion
    - Sección proyectos vídeos
    - Media Queries para Responsividad
    - Sección Quienes Somos

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography */
body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: 'Mulish', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
  font-family: 'Mulish', sans-serif;
}

blockquote {
  margin: 0 1.5em;
  font-family: 'Mulish', sans-serif;
  font-style: italic;
}

address {
  margin: 0 0 1.5em;
  font-family: 'Mulish', sans-serif;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: "monaco", consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
  font-family: 'Mulish', sans-serif;
}

big {
  font-size: 125%;
  font-family: 'Mulish', sans-serif;
}

/* Links */
a {
  color: #4169e1;
  font-family: 'Mulish', sans-serif;
}

a:visited {
  color: #800080;
}

a:hover,
a:focus,
a:active {
  color: #191970;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Elements
--------------------------------------------- */
body {
	background: #000;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: flex;
	width: 100%;
	justify-content: flex-end; /* Alinea los enlaces a la derecha */
    flex-grow: 1; /* Permite que ocupe el espacio sobrante */
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 0em;
}

.updated:not(.published) {
	display: none;
}



.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}







/*--------------------------------------------------------------
# Anadido por mí
--------------------------------------------------------------*/

/* Título página principal oculto */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}


/* Menu
--------------------------------------------- */
/* Estilos básicos del menú */
#main-header {
    position: fixed;
    height: 80px;
    padding: 0;
    top: -80px;
    left: 0;
    right: 0;
    background: #060606;
    transition: all 0.8s ease-in-out;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    
    /* Centrado Vertical. Se mantiene flex-start para usar margin:auto en el hijo */
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
}

/* Define el ancho máximo, el espaciado lateral y la organización interna */
.header-inner-wrap {
    display: flex;
    align-items: center;
    
    /* CLAVE PARA AGRUPAR: Usamos flex-start (o ningún valor) y gap */
    justify-content: flex-start; 
    gap: 50px; /* Esto define la separación entre el logo y el menú */
    
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; /* Centra el bloque .header-inner-wrap horizontalmente */
    padding: 0 50px; 
    box-sizing: border-box;
}

/* Estilo del Logo */
.site-logo {
    display: flex;
    align-items: center;
    height: 50px;
    flex-shrink: 0;
}

.site-logo img {
    max-height: 60px;
    height: auto;
    display: block;
}

/* Estilo de la Navegación */
.main-navigation {
    display: flex; 
    /* Eliminamos el margin-left que ya no es necesario gracias al gap */
    justify-content: flex-start; 
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0; 
    padding: 0; 
}

.nav-links li {
    display: block;
}

.nav-links a {
    text-decoration: none;
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
    color: #fff;
    opacity: 0.80;
    padding: 10px 15px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #fff;
    opacity: 0.98;
}

/* Clases de scroll (Mantenidas) */
.scrolled {
    top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.hidden-nav {
    top: -80px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}




/* FOOTER */
/* Footer Styles */
.site-footer {
    background-color: #000000f0; /* Fondo negro semi-transparente */
    color: #fff; /* Texto blanco */
    padding: 20px 0; /* Espaciado alrededor del texto */
    /*margin-top: 4rem; /* Separación superior del footer */
}

.footer-bottom .container {
    text-align: center; /* Centra el texto */
    max-width: 1200px; /* Ancho máximo alineado al contenido principal */
    margin: 0 auto; /* Centrar contenedor del footer */
    padding: 0 20px; /* Padding lateral */
}

.footer-bottom p {
    margin: 0; /* Elimina el margen */
    font-size: 14px; /* Ajusta el tamaño de fuente */
    color: #fff; /* Texto blanco */
}




/* Alineación y ancho de bloques*/
/* Contenedor INTERNO de los bloques para limitar el ancho y centrar */
body .wp-block-group > .wp-block-group__inner-container { /* Selector más específico - Contenedor INTERNO */
    max-width: 70%;  /* Ancho máximo */
    margin-left: auto;
    margin-right: auto;
    padding-left: inherit; /* Conserva el padding por defecto si lo hay */
    padding-right: inherit; /* Conserva el padding por defecto si lo hay */
    box-sizing: border-box;
}

/* Estilo para alineación amplia (alignwide) - Contenedor INTERNO */
body .wp-block-group.alignwide > .wp-block-group__inner-container { /* Selector más específico - Contenedor INTERNO con alignwide */
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
}

/* Estilo para alineación completa (alignfull) -  YA NO LIMITAMOS EL ANCHO  */
body .wp-block-group.alignfull > .wp-block-group__inner-container { /* Selector más específico - Contenedor INTERNO con alignfull */
    max-width: none; /* Eliminar max-width para que ocupe todo el ancho del padre */
    width: 100%;     /* Asegurar ancho completo */
    margin-left: 0;
    margin-right: 0;
}


/* Ajuste Adicional: Para bloques Cover (si es necesario un ancho máximo similar) - Contenedor INTERNO */
body .wp-block-cover > .wp-block-cover__inner-container { /*  Selector para Cover - Contenedor INTERNO */
    max-width: 85%; /* Ancho máximo similar a alignwide (ajusta si es diferente) */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: inherit;
    padding-right: inherit;
}





/* Estilos Generales, fuentes y personalizaciones */

body {
    font-family: 'Mulish', sans-serif; /* Fuente principal para textos */
    color: #333; /* Color de texto principal */
    margin: 0; /* Eliminar márgenes por defecto del body */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Jost', sans-serif; /* Fuente para títulos y subtítulos */
    color: #333; /* Color de títulos principal */
    font-weight: 600; /* Peso de fuente más marcado para títulos */
    line-height: 1.2; /* Mejora la legibilidad de los títulos */
    margin-bottom: 1rem; /* Espaciado debajo de los títulos */
}

p {
    line-height: 1.6; /* Mejora la legibilidad del texto */
    margin-bottom: 1.5rem; /* Espaciado entre párrafos */
}

a {
    color: #4169e1; /* Color de enlaces */
    text-decoration: none; /* Eliminar subrayado por defecto de los enlaces */
    transition: color 0.3s ease; /* Transición suave para cambios de color */
}

a:hover {
    color: #64FA75; /* Color de enlaces al pasar el ratón */
}





/* Hero PRIMERA SECCION - Video de fondo a Ventana Completa */

#hero-section.wp-block-cover {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333;
    position: relative; /* Necesario para posicionar el video */
    overflow: hidden; /* Oculta el contenido que se salga del contenedor */
}

#hero-section.wp-block-cover .wp-block-cover__background {
    display: none; /* Oculta el fondo por defecto del bloque Cover */
}

/* Estilos para el contenido (titulo y subtitulo) */
#hero-section.wp-block-cover .wp-block-cover__inner-container > .wp-block-group > .wp-block-group__inner-container {
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box; /* Importante para evitar problemas de ancho */
}

#hero-section.wp-block-cover h2.wp-block-heading {
    font-size: 3rem;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
}

#hero-section.wp-block-cover p.wp-block-paragraph {
    font-size: 1.2rem;
    color: #555;
    margin: 0 auto;
    text-align: center;
}

/* Estilos para el video */
#hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; /* Asegura que el video esté por encima del contenido */
}

/* Reseteo de márgenes y padding (para evitar problemas con anchos) */
#hero-section,
#hero-section *,  /* Aplica a todos los elementos dentro de #hero-section */
#hero-section .wp-block-cover__inner-container,
#hero-section .wp-block-group,
#hero-section .wp-block-group__inner-container {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que padding y border no afecten el ancho total */
}





/*  Estilos para el RECURSO VISUAL "Desplázate Para Ver Más" */

#scroll-cue {
    position: absolute; /*  Posicionamiento absoluto dentro de #hero-section */
    bottom: 9rem; /*  Distancia desde la abajo */
    left: 5rem; /*  Distancia desde la izquierda */
    /* display: flex;  <<-- ELIMINADO: Ya no usamos flexbox en #scroll-cue */
    /* flex-direction: row; <<-- ELIMINADO */
    /* align-items: center; <<-- ELIMINADO */
    color: rgba(255, 255, 255, 1); /*  Color del texto y línea (blanco ligeramente grisáceo) */
    z-index: 2; /*  Asegura que esté por encima del video */
    text-align: left; /* Alineación del texto a la izquierda (dentro de su propio espacio) */
    display: block; /* **AÑADIDO: Asegurar que #scroll-cue sea un bloque, por si acaso** */
    /*position: relative; /* **AÑADIDO: Para posicionar elementos absolutos dentro de él** */
}

#scroll-cue .linea-fija {
    width: 2px; /*  Ancho de la línea fija */
    height: 5rem; /*  Largo de la línea fija */
    background-color: rgba(200, 200, 200, 0.5); /* Transparencia a la línea fija (alpha en 0.5) */
    display: block; /* Asegura que se comporte como un bloque */
    position: absolute; /* **MODIFICADO: Posicionamiento absoluto dentro de #scroll-cue */
    left: 0;        /* **AÑADIDO:  Alineado a la izquierda de #scroll-cue */
    top: 0;         /* **AÑADIDO:  Alineado a la parte superior de #scroll-cue */
}

#scroll-cue .linea-animada {
    width: 2px;
    height: 20px;
    background-color: white;
    display: block;
    /*margin-left: -2px; */
    position: absolute;
    left: 0;
    top: 2rem; /* Ajuste posición vertical */
    animation: scroll-indicator 1.5s infinite ease-in-out; /* **REVISA ESTA LÍNEA CON ATENCIÓN** */
}

#scroll-cue p {
    margin-left: 30px; /* **MODIFICADO: Aumentamos el margen izquierdo para separar el texto de las líneas (ahora posicionadas absolutamente) */
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.2;
    font-size: 0.9em;
    white-space: normal;
    display: block; /* Asegurar que cada <p> sea un bloque */
    /* width: 100%; <<-- ELIMINADO: Ya no forzamos el ancho al 100% */
    box-sizing: border-box; /* Asegurar que padding/border no afecten el ancho */
    position: relative; /* **MODIFICADO y CLAVE: Posicionamiento relativo para mover solo el texto** */
    bottom: -2rem;      /* **MODIFICADO y CLAVE: Desplaza el texto 1rem hacia abajo (ajusta el valor)** */
}

/*  Definición de la animación "scroll-indicator" */
@keyframes scroll-indicator {
    0% {
        transform: translateY(0); /*  Posición inicial (arriba) */
    }
    50% {
        transform: translateY(15px); /*  Se desplaza hacia abajo 10px */
    }
    100% {
        transform: translateY(0); /*  Regresa a la posición inicial (loop) */
    }
}




/*  SEGUNDA SECCION - Sección Título y Descripción Impactante -  CORRECCIÓN DESCRIPCIÓN A UNA COLUMNA */
#sobre-mi-seccion.wp-block-group {
    background-color: #000000f0;
    padding-top: 20rem;
    padding-bottom: 10rem;
    text-align: center;
}

#sobre-mi-seccion .section-title.wp-block-heading {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 4rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.1;
    opacity:0.98;
}

/*  CORRECCIÓN: FORZAR DESCRIPCIÓN A UNA SOLA COLUMNA DENTRO DE #sobre-mi-seccion */
#sobre-mi-seccion .section-description {
    display: block; /* Forzamos a que se muestre como un bloque normal, en una sola columna */
    grid-template-columns: none; /*  Opcional: Anulamos explícitamente la plantilla de columnas de grid */
    max-width: 70%;
    margin: 0 auto;
    padding: 0 50px;
}


#sobre-mi-seccion .section-description p.wp-block-paragraph {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.7;
    font-weight: 400;
    opacity:0.9;
}
.section-description hr.wp-block-separator {
    background-color: black; /* Color de fondo negro */
    border-color: white; /* Color de línea blanca */
    opacity: 1; /* Asegura que la línea sea completamente visible */
    width: 50%; /* Ancho del separador: 50% del contenedor */
    margin-top: 15rem;
}

/* Media Query para pantallas más pequeñas (tablets y móviles) - Ajustes para la SEGUNDA SECCION */
@media (max-width: 1024px) {
    #sobre-mi-seccion.wp-block-group {
        padding: 8rem 0;
    }

    #sobre-mi-seccion .section-title.wp-block-heading {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    #sobre-mi-seccion .section-description p.wp-block-paragraph {
        font-size: 1.1rem;
    }
}







/* Áreas de Especialización Styles (Versión con Listas Sin Viñetas) */

#areas-especializacion.wp-block-group {
    padding: 10rem 0;
    background-color: #000000f0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#areas-especializacion .section-title.wp-block-heading {
    font-size: 2.5rem;
    text-align: left;
    color: #fff;
    opacity: 0.98;
    margin-bottom: 0rem;
    max-width: 85%;
    margin-right: auto;
    padding-left: 0;
    padding-right: 20px;
    box-sizing: border-box;
}

.section-description {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    max-width: 85%;
    margin: 0 auto 10rem auto;
    padding-left: 0;
    padding-right: 20px;
    box-sizing: border-box;
    align-self: flex-start;
}

.wp-block-paragraph {
    font-size: 1.2rem;
    color: #fff;
    opacity: 0.95;
    line-height: 1.7;
    font-weight: 400;
}

/* Estilos para el nuevo diseño de Listas en 2 Columnas */
.portfolio-grid.wp-block-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem; 
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    align-self: flex-start;
    margin-bottom: 5rem;
}

/* Estilo para el Contenedor de cada Columna de Lista */
.list-column.wp-block-group {
    background-color: rgba(6, 6, 6, 0.15);
    padding: 2rem; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
}

/* Estilo del Título de la Lista (Ajustado el padding-left a 0) */
.list-title.wp-block-heading {
    font-size: 1.5rem; 
    color: #fff;
    opacity: 0.98;
    margin-bottom: 1.5rem; 
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    padding-bottom: 0.5rem;
    padding-left: 0; /* Aseguramos que no haya padding extra aquí */
}

/* Estilo General de la Lista */
.styled-list {
    list-style: none; /* Sigue siendo necesario para asegurar que no haya listas predeterminadas */
    padding-left: 0;
    margin: 0;
}

/* Estilo de cada Elemento de la Lista (Ajustado el padding-left a 0) */
.styled-list li {
    position: relative;
    margin-bottom: 1.5rem; 
    padding-left: 0; /* Eliminamos el padding para la viñeta */
    font-size: 1.1rem; 
    line-height: 1.4;
    color: #fff;
    opacity: 0.98;
}

/* ELIMINAMOS O COMENTAMOS EL BLOQUE li::before para quitar la viñeta */
/*
.styled-list li::before {
    content: "→"; 
    color: #fff; 
    font-weight: bold;
    display: inline-block;
    width: 1em; 
    margin-left: -1em; 
    position: absolute;
    left: 0.5rem; 
    top: 0; 
    font-size: 1.2em; 
    line-height: 1.4; 
}
*/

/* Estilo para la descripción secundaria */
.list-description {
    display: block; 
    font-size: 0.95rem; 
    opacity: 0.8;
    margin-top: 0.3rem;
    font-weight: 400; 
    line-height: 1.3;
}
---
## 2. Ajustes para Móviles 📱

```css
/* Media Query para Dispositivos Móviles (Recomendado) */
@media (max-width: 768px) {
    #areas-especializacion.wp-block-group {
        padding: 5rem 0;
    }

    .section-description {
        grid-template-columns: 1fr;
        max-width: 90%;
        margin-bottom: 5rem;
        padding-right: 0;
    }
    
    .portfolio-grid.wp-block-group {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 90%;
    }

    .list-column.wp-block-group {
        padding: 1.5rem;
    }

    .list-title.wp-block-heading {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        padding-left: 0; /* Aseguramos que no haya padding extra aquí */
    }

    .styled-list li {
        font-size: 1rem;
        margin-bottom: 1.2rem;
        padding-left: 0; /* Eliminamos el padding para la viñeta */
    }

    .list-description {
        font-size: 0.9rem;
    }
}





/* Sección proyectos vídeos */
.video-projects-section {
  background-color: #000000f0;
  width: 100%; 
  padding: 1rem 0;
  margin: 0; 
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------- */
/* CORRECCIÓN FINAL: Ancho Ampliado y Centrado usando unidades VW para margen */
/* ---------------------------------------------------------------------- */

.video-projects-section .wp-block-group__inner-container {
  /* 1. Definimos un ancho MÁXIMO grande (el límite en monitores gigantes) */
  max-width: 1800px; 
  
  /* 2. Forzar el centrado */
  margin-left: auto;
  margin-right: auto;

  /* 3. APLICAMOS EL ESPACIADO PROPORCIONAL con VW (Viewport Width) */
  /* Si queremos más hueco, aumentamos el valor de VW. 
     Aquí, 4vw significa que el padding será el 4% del ancho de la ventana
     en cada lado (un total de 8vw de hueco).
  */
  padding-left: 40vw; 
  padding-right: 40vw;
  box-sizing: border-box;
}

/* El contenido (h2, p, grilla) hereda el max-width de 1800px y el padding de 4vw */

.video-projects-section h2 {
  margin-top: 5rem;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color:#fff;
  opacity:0.98;
  text-align: center; 
}

.video-projects-section p.wp-block-paragraph {
  font-size: 1.2rem;
  color: #fff;
  opacity: 0.95;
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 5rem;
  text-align: center;
}

/* La grilla usa el ancho de su padre (el inner-container) */
.video-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-left: 10vw; 
  padding-right: 10vw;
  box-sizing: border-box;
}
.video-project {
  padding: 15px;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
.video-project h3 {
  margin-top: 0;
  margin-bottom: 5px;
  color: #fff;
  opacity: 0.95;
}
.video-project p {
  margin-top: 0;
  margin-bottom: 10px;
  color: #fff;
  opacity: 0.92;
}
.video-project hr {
  border: 0;
  border-top: 1px solid #eee;
  margin-top: 15px;
}

/* Media Query para dispositivos móviles (pantallas pequeñas) */
@media (max-width: 768px) {
  .video-projects-grid {
      grid-template-columns: repeat(1, 1fr);
  }
  
  .video-projects-section .wp-block-group__inner-container {
      max-width: 100%;
      /* Usamos PX en móvil para asegurar un espaciado mínimo fijo */
      padding-left: 10px; 
      padding-right: 10px;
  }
  
  .video-projects-section h2 {
      font-size: 2rem;
  }
}




/* Estilos para la sección "Llamada a la acción" - Versión 5 (Maquetación Columnas, Moderno, Contraste) - **CORREGIDO FLEXBOX** */
.call-to-action-section-v5 {
    /* Estilos generales de la sección. Ahora con fondo oscuro por defecto */
    color: #fff; /* Texto blanco por defecto en toda la sección */
    padding-bottom: 10rem;
}

.call-to-action-section-v5 .wp-block-cover__inner-container {
    padding-top: 70px; /* Aumentar aún más el padding vertical */
    padding-bottom: 70px;
}

/* Contenedor PRINCIPAL del contenido - **MAQUETACIÓN EN COLUMNAS - AHORA EN .columns-container** */
.call-to-action-section-v5 .call-to-action-content-v5 {
    /*  Mantenemos estilos generales para el contenedor principal */
    max-width: 95%; /* Ancho máximo aún más amplio */
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px; /* Más padding lateral */
    padding-right: 40px;
    /*  ¡¡¡  QUITAMOS Flexbox de .call-to-action-content-v5 !!! */
    /* display: flex;  <-- ELIMINADO DE AQUÍ */
    /* flex-direction: row; <-- ELIMINADO DE AQUÍ */
    /* align-items: flex-start; <-- ELIMINADO DE AQUÍ */
    /* gap: 60px; <-- ELIMINADO DE AQUÍ */
}

/* **CONTENEDOR DE COLUMNAS - AHORA SÍ ES FLEXBOX** */
.call-to-action-section-v5 .columns-container {
    display: flex; /* **¡¡¡  APLICAMOS Flexbox AQUÍ !!!** */
    flex-direction: row; /* Alinear elementos en FILA (horizontalmente) */
    align-items: flex-start; /* Alinear columnas en la parte superior (inicio) */
    gap: 60px; /* Espacio entre columnas */
}


/* COLUMNA IZQUIERDA (Título y Texto) */
.call-to-action-section-v5 .left-column {
    flex: 1; /* La columna izquierda ocupa el espacio disponible */
    min-width: 300px; /* Ancho mínimo para la columna izquierda */
}

/* COLUMNA DERECHA (Botón y Contacto) */
.call-to-action-section-v5 .right-column {
    flex: 1; /* La columna derecha también ocupa espacio disponible */
    min-width: 300px; /* Ancho mínimo para columna derecha */
    display: flex; /* Flexbox para alinear verticalmente dentro de la columna derecha */
    flex-direction: column; /* Alinear elementos verticalmente dentro de la columna derecha */
    align-items: flex-start; /* Alinear a la izquierda dentro de la columna derecha */
    justify-content: space-between; /* Distribuir verticalmente el botón y la info de contacto */
    padding-top: 10px; /* Ligeramente desplazado hacia abajo para alinear visualmente con la columna izquierda */
}


/* TÍTULO PRINCIPAL "¿Listo para empezar?" -  Grande y Moderno */
.call-to-action-section-v5 .main-title-v5.wp-block-heading {
    font-size: 3.2em; /* Título aún más grande */
    font-weight: 800;
    color: #fff;
    text-align: left; /* Alineado a la izquierda en la columna */
    margin-bottom: 20px;
    letter-spacing: -2.5px; /* Aún más juntas las letras */
    line-height: 1.05; /* Altura de línea muy ajustada */
    text-shadow: 3px 3px 5px rgba(0,0,0,0.3); /* Sombra más intensa */
}

/* TEXTO SECUNDARIO "Hablemos sobre tu proyecto" -  Claro y Legible */
.call-to-action-section-v5 .secondary-text-v5.wp-block-paragraph {
    font-size: 1.5em; /* Tamaño de fuente adecuado para texto secundario */
    color: rgba(255,255,255,0.85); /* Blanco ligeramente transparente para suavizar */
    text-align: left; /* Alineado a la izquierda en la columna */
    font-weight: 300;
    margin-bottom: 0; /* Eliminar margin-bottom aquí (el espaciado se controla por la columna derecha) */
    line-height: 1.5;
}

/* CONTENEDOR DEL BOTÓN DE EMAIL -  Estilo Moderno */
.call-to-action-section-v5 .email-button-wrapper-v5 {
    text-align: left; /* Alinear a la izquierda dentro de la columna derecha */
    margin-bottom: 30px; /* Espacio debajo del botón */
}


/* BOTÓN DE EMAIL "Envíanos un correo" -  Estilo Botón Primario Moderno */
.call-to-action-section-v5 .email-link-v5 {
    color: #1E1E1E; /* Texto oscuro para contraste con fondo blanco */
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 700; /* Más bold que antes */
    padding: 20px 45px; /* Padding aún mayor para botón más grande */
    background-color: #fff; /* Fondo blanco para el botón principal */
    border: 2px solid transparent; /* Eliminar borde blanco, usar sombra en su lugar */
    border-radius: 10px; /* Bordes aún más redondeados */
    transition: all 0.3s ease-in-out;
    display: inline-block; /* Bloque en línea */
    box-shadow: 0 6px 15px rgba(0,0,0,0.25); /* Sombra más pronunciada y oscura */
}

/* EFECTO HOVER DEL BOTÓN DE EMAIL -  Sutil Cambio de Color */
.call-to-action-section-v5 .email-link-v5:hover {
    background-color: #ff6e00; /* Fondo cambia a verde acento en hover */
    color: #fff; /* Texto cambia a blanco en hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Sombra aún mayor en hover */
    transform: translateY(-2px); /* Ligeramente 'levanta' en hover */
}


/* INFORMACIÓN DE CONTACTO -  Estilo Discreto - **COLORES MEJORADOS PARA LEGIBILIDAD** */
.call-to-action-section-v5 .contact-info-v5 {
    text-align: left; /* Alinear a la izquierda en la columna derecha */
    opacity: 1; /* **Opacidad al 100% (totalmente opaco)** */
}

.call-to-action-section-v5 .contact-info-v5 p {
    font-size: 0.9em; /* Tamaño de fuente pequeño para información de footer */
    color: #FAFAFA; /* **Color blanco casi puro (#FAFAFA) - MÁS LEGIBLE** */
    margin-bottom: 4px; /* Menos espacio entre líneas */
    line-height: 1.8; /* Altura de línea un poco mayor para legibilidad en texto pequeño */
    font-weight: 300;
}


/* Estilos específicos para "Hecho desde Galicia" y "Teléfono" (por si se requieren más diferenciaciones) */
.call-to-action-section-v5 .contact-info-v5 .made-in-v5 {
    /* Por ahora, usa estilos generales de .contact-info-v5 p */
}

.call-to-action-section-v5 .contact-info-v5 .phone-number-v5 {
    /* Por ahora, usa estilos generales de .contact-info-v5 p */
    font-weight: 400; /* Teléfono un poco más destacado dentro de la info de contacto */
    color: #FAFAFA; /* **Color blanco casi puro (#FAFAFA) - MÁS LEGIBLE** */
    /*  También podríamos darle un color ligeramente diferente si quisieras resaltar más el teléfono */
    /*  Por ejemplo,  color: #c0c0c0;  (gris claro) o  color: #ddd; (gris muy claro) */
}





/* Media Queries para Responsividad
--------------------------------------------- */

/* Tablets y pantallas pequeñas de escritorio (hasta 1024px) */
@media (max-width: 1024px) {
    
    /* Contenedores de bloques */
    .wp-block-group > .wp-block-group__inner-container {
        width: 85%;
    }

    /* Sección de Áreas de Especialización */
    #areas-especializacion .portfolio-grid.wp-block-group {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    /* Sección Hero (Ajustes de altura y padding en caso de que min-height: 100vh fallara) */
    #hero-section.wp-block-cover {
        height: auto;
        padding: 6rem 0;
        min-height: auto;
    }

    #hero-section.wp-block-cover h2.wp-block-heading {
        font-size: 2.5rem;
    }

    #hero-section.wp-block-cover p.wp-block-paragraph {
        font-size: 1.1rem;
    }

    #areas-especializacion .wp-block-heading {
        font-size: 2rem;
    }

    #llamada-accion .wp-block-heading {
        font-size: 2rem;
    }
    #llamada-accion .wp-block-paragraph {
        font-size: 1.1rem;
    }

    /* CORRECCIÓN CTA para Tablets */
    .call-to-action-section-v5 .call-to-action-content-v5 {
        padding-left: 15px; 
        padding-right: 15px;
    }

    .call-to-action-section-v5 .columns-container {
        flex-direction: column; /* APILAR columnas */
        gap: 40px;
        width: 100%;
    }

    .call-to-action-section-v5 .left-column,
    .call-to-action-section-v5 .right-column {
        flex: none;
        width: 100%;
        min-width: auto;
    }
    
    .call-to-action-section-v5 .right-column {
        padding-top: 0;
        align-items: center; 
        text-align: center;
    }
    
    .call-to-action-section-v5 .main-title-v5.wp-block-heading {
        text-align: center; 
    }
    
    .call-to-action-section-v5 .secondary-text-v5.wp-block-paragraph {
        text-align: center; 
    }

    .call-to-action-section-v5 .email-button-wrapper-v5 {
        text-align: center;
        width: 100%;
    }
}

/* Móviles (hasta 767px) */
@media (max-width: 767px) {
    /* Contenedores de bloques */
    .wp-block-group > .wp-block-group__inner-container {
        width: 95%;
        padding: 1.5rem 1rem;
    }

    #hero-section.wp-block-cover h2.wp-block-heading {
        font-size: 2rem;
    }

    #hero-section.wp-block-cover p.wp-block-paragraph {
        font-size: 1rem;
    }

    #areas-especializacion .section-title.wp-block-heading {
        font-size: 2.5rem;
        text-align: left;
        margin-bottom: 3rem; 
        max-width: 85%; 
        margin-left: 0; 
        margin-right: auto; 
        padding-left: 0; 
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* OCULTAR COMPLETAMENTE EL INDICADOR DE SCROLL EN MÓVILES */
    #scroll-cue {
        display: none !important;
    }

    /* --- CORRECCIONES CTA PARA MÓVILES --- */
    
    /* Asegurar que el contenido CTA aprovecha el ancho completo del móvil */
    .call-to-action-section-v5 .call-to-action-content-v5 {
        padding-left: 15px; 
        padding-right: 15px;
        max-width: 100%;
    }

    #llamada-accion.wp-block-cover {
        padding: 4rem 0; /* Eliminar padding horizontal del cover */
    }
    
    #llamada-accion .wp-block-heading {
        font-size: 2rem;
    }
    
    .section-description {
        grid-template-columns: 1fr; 
        max-width: 100%; 
        padding-left: 0; 
        padding-right: 0; 
        text-align: center; 
        margin-bottom: 2rem; 
    }

    .call-to-action-section-v5 .columns-container {
        flex-direction: column; 
        gap: 30px; 
    }

    .call-to-action-section-v5 .email-link-v5 {
        /* Hacemos que el botón ocupe casi todo el ancho, y lo centramos */
        display: block; 
        text-align: center;
        width: 90%; 
        margin: 0 auto 30px auto; 
        font-size: 1.1em; 
        padding: 15px 10px; 
    }
    
    .call-to-action-section-v5 .contact-info-v5 {
        text-align: center;
    }
}


/* Ajustes Finos y Correcciones */

/* Asegurar que las imágenes dentro de los bloques de WordPress sean responsivas por defecto */
.wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacio adicional debajo de las imágenes */
}

/* Eliminar márgenes superior e inferior en algunos bloques para evitar espaciado excesivo entre bloques adyacentes, si es necesario */
.wp-block-group + .wp-block-group, /* Espaciado entre grupos */
.wp-block-cover + .wp-block-group, /* Espaciado entre cover y grupo */
.wp-block-group + .wp-block-cover  /* Espaciado entre grupo y cover */
{
    margin-top: 0;
    margin-bottom: 0;
}