/*!
Theme Name: goldenretrieverdelalexpar
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
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: goldenretrieverdelalexpar
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.

goldenretrieverdelalexpar 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

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

/*--------------------------------------------------------------
# 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%;
  scroll-behavior: smooth;
}

/* MIO
	 ========================================================================== */

:root {
  --container: 90%; /* Valor por defecto para pantallas muy pequeñas */
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0 auto;
  max-width: var(--container);
}

/* Para pantallas más grandes (ejemplo: tablets) */
@media (min-width: 768px) {
  :root {
    --container: 720px;
    --spacing: 20px;
  }

  imagen-cabecera {
    width: 100%;
    height: auto;
  }
}

/* Para pantallas de escritorio medianas */
@media (min-width: 992px) {
  :root {
    --container: 960px;
    --spacing: 20px;
  }
}

/* Para pantallas de escritorio grandes */
@media (min-width: 1200px) {
  :root {
    --container: 1140px;
    --spacing: 25px;
  }
}

/* Para pantallas de escritorio extra grandes */
@media (min-width: 1400px) {
  :root {
    --container: 1320px;
    --spacing: 25px;
  }
}

.container.margen-contenido {
  margin-top: 10vh;
  margin-bottom: 10vh;
}

.entry-content {
  margin-bottom: 10vh !important;
}

.custom-logo {
  max-width: 200px; /* Tamaño máximo en pantallas grandes (ajusta según tu diseño) */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Ayuda a controlar el espaciado si es necesario */
}

.hero-text {
  font-size: larger;
}

.hero-slogan {
  /* Color del texto: Ya es blanco, lo cual contrasta bien con el rojo */
  font-weight: 700; /* O 'bold'. 700 es un valor numérico común para negrita */

  /* Tamaño de la fuente: Puedes ajustarlo para que tenga más presencia */
  font-size: 1.2em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
  /* Sombra ligera: desplazamiento x, desplazamiento y, radio de desenfoque, color (negro con 50% de opacidad) */

  margin: 5px 10px; /* Ajusta el valor según cuánto espacio necesites */

  text-transform: uppercase; /* Mantiene el texto en mayúsculas */
  text-align: center;
}

.custom-button {
  display: inline-block;
  padding: 8px 5px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  /* Para los bordes redondeados */
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Sombra suave */
}

.hero-button {
  box-shadow: 0px 0px 9px 0 #d5bb7e;
  display: inline-block;
  background-color: #6a1b9a;
  /* Un tono de púrpura similar */
  color: #ffffff;
  padding: 12px 28px;
  border: none;
  border-radius: 25px;
  /* Para hacerlo tipo "píldora" */
  text-decoration: none;
  font-size: 0.9rem;
  /* 14px */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease;
  font-family: "Montserrat", sans-serif;
}

.hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) calc(100% - 20px),
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) calc(100% - 20px),
    rgba(0, 0, 0, 0) 100%
  );
}



/* --- Contenedor del Contenido Centrado --- */
.hero-content {
  /* position: relative; */
  /* Para que esté por encima del overlay */
  z-index: 2;
  text-align: center;
  padding: 20px;
  margin-top: 17vh;
}

/* --- Estilos del Texto --- */
.hero-subtitle {
  font-size: 2.5rem;
  /* 40px */
  font-weight: 600;
  margin: 0;
  /* Puedes usar una tipografía con serifas para este */
  font-family: "Montserrat", sans-serif;
}

.hero-title {
  font-size: 3.5rem;
  /* 56px */
  font-weight: bold;
  margin: 10px 0;
  text-transform: uppercase;
}

.hero-date {
  font-size: 1rem;
  /* 16px */
  margin: 0 0 30px 0;
  /* Espacio antes del botón */
  opacity: 0.9;
  /* box-shadow: 0px 0px 9px 0 #000000FF; */
}

/* --- Estilos del Botón Púrpura --- */
.hero-button {
  display: inline-block;
  background-color: #6a1b9a;
  /* Un tono de púrpura similar */
  color: #ffffff;
  padding: 12px 28px;
  border: none;
  border-radius: 25px;
  /* Para hacerlo tipo "píldora" */
  text-decoration: none;
  font-size: 0.9rem;
  /* 14px */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease;
  font-family: "Montserrat", sans-serif;
}

.hero-button:hover {
  background-color: #4a148c;
  /* Un púrpura más oscuro al pasar el ratón */
  cursor: pointer;
}

.blogcontainer {
  text-align: center;
  margin: 1rem;
}
.aligncenter {
  text-align: center;
  align-self: center;
}

.bginvisible {
  background-color: transparent;
}

.principal {
  background-color: #572175;
  color: #333333;
}
.secondary {
  background-color: #d5bb7e;
  color: #222222;
}

.basis-auto {
  flex-basis: auto;
}

.basis60 {
  flex-basis: 60%;
}

.basis40 {
  flex-basis: 40%;
}

.hero-image-container {
  align-content: center;
}

.contenedor-mapa-direccion {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 20px;
  padding: 0;
  border-radius: 10px;
}

.mapa {
  width: 100%;
  min-height: 60vh;
}

.mapa-text {
  line-height: 1.4;
  margin: 10px 0px 0px 0px;
  font-size: 17px;
  color: #333333;
}

/* Asegura que las imágenes sean responsivas */
.detail-img {
  max-width: 100%;
  /* La imagen nunca será más ancha que su contenedor */
  height: auto;
  /* Mantiene la proporción de la imagen */
  display: block;
  /* Elimina espacio extra debajo de las imágenes */
}

/* --- Estilos de la Sección Hero --- */
.detail-section {
  /* *** Reemplaza con la ruta de tu imagen *** */
  background-size: cover;
  /* Cubre toda el área de la sección sin distorsionar la imagen */
  background-position: center;
  /* Centra la imagen de fondo */
  background-repeat: no-repeat;
  /* Evita que la imagen se repita */
  color: #fff;
  /* Color del texto (blanco) para que se lea bien sobre la imagen */
  text-align: center;
  /* Centra el texto dentro del hero */
  padding: 80px 20px;
  /* Espaciado interior arriba y abajo */
  position: relative;
  /* Necesario si quieres superponer algo o usar pseudo-elementos */
  min-height: 400px;
  /* Altura mínima para que se vea la imagen, ajusta si necesitas más */

  display: flex;
  align-items: center;
  justify-content: center;

  /* Opcional: Capa semi-transparente oscura sobre la imagen para mejorar la legibilidad del texto */
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Color negro con 50% de opacidad */
    z-index: 1;
    /* Asegura que la capa esté sobre la imagen pero bajo el contenido */
  }
}

.detail-content {
  position: relative;
  /* Coloca el contenido sobre la capa semi-transparente */
  z-index: 2;
  /* Mayor que el z-index de ::before */
  /* Opcional: Text-shadow para que el texto resalte aún más */
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
}

.detail-content h1 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 2.8em;
  /* Tamaño grande para el título principal */
}

.detail-content p {
  margin-top: 0;
  font-size: 1.2em;
  /* Tamaño para el subtítulo */
  max-width: 800px;
  /* Limita el ancho del subtítulo */
  margin-left: auto;
  /* Centra el párrafo con max-width */
  margin-right: auto;
  /* Centra el párrafo con max-width */
}

/* --- ESTILOS PARA EL ENLACE DE INFORMACIÓN --- */
/* --- 1. Contenedor para alinear el botón --- */
.ficha-link-contenedor {
    /* Mantiene el espacio superior que ya tenías */
    margin-top: 15px; 
    padding-top: 15px; 
    border-top: 1px dashed #e0e0e0;
    
    /* Centra el elemento interno (el botón) */
    text-align: center; 
}

/* --- 2. Estilo del Enlace (como Botón) --- */
.ficha-link-info {
    /* Propiedades de visualización */
    display: inline-block; /* NECESARIO para que se comporte como un botón y acepte padding/width */
    
    /* Diseño del botón */
    padding: 10px 20px;
    border: 2px solid #5a189a; /* Borde morado */
    border-radius: 6px;
    background-color: #5a189a; /* Fondo morado */
    
    /* Estilos de texto */
    color: #ffffff !important; /* Texto blanco (¡importante para sobrescribir si es necesario!) */
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    
    /* Transición para efectos de hover suaves */
    transition: all 0.3s ease;
}

/* --- 3. Efecto al pasar el ratón (Hover) --- */
.ficha-link-info:hover {
    background-color: #ffffff; /* Fondo blanco */
    color: #5a189a !important; /* Texto morado */
    text-decoration: none;
    /* Elimina el efecto de "levantamiento" si no lo quieres */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* --- Estilos de la Sección de Contenido (Columnas) --- */
.content-section {
  display: flex;
  /* Habilita Flexbox para crear columnas */
  flex-direction: row;
  /* Por defecto en Flexbox, pero lo especificamos (columnas) */
  gap: 40px;
  /* Espacio entre la columna de texto y la de imágenes */
  padding: 40px 20px;
  /* Espaciado interior de la sección */
  max-width: 1200px;
  /* Ancho máximo del contenido para centrarlo */
  margin: 0 auto;
  /* Centra la sección en la página */
  align-items: flex-start;
  /* Alinea las columnas en la parte superior */
  flex-wrap: wrap;
}

.text-column {
  flex: 2;
  /* La columna de texto ocupará 2 partes de 3 (aprox 66%) */
  min-width: 0;
  /* Permite que el contenido dentro de la columna se reduzca si es necesario */
}

.image-column {
  flex: 1;
  /* La columna de imágenes ocupará 1 parte de 3 (aprox 33%) */
  min-width: 0;
  /* Permite que las imágenes se reduzcan */
  display: flex;
  /* Habilita Flexbox dentro de la columna de imágenes si hay varias */
  flex-direction: column;
  /* Apila las imágenes verticalmente si hay varias */
  gap: 20px;
  /* Espacio entre imágenes si hay varias */
}

.text-column,
.image-column {
  flex: none;
  /* Elimina el flex-grow/shrink para que ocupen el ancho completo */
  width: 100%;
  /* Ocupan todo el ancho disponible */
}

.detail-section {
  padding: 60px 15px;
  /* Reduce el padding del hero en móviles */
  min-height: 300px;
  /* Ajusta altura mínima del hero si es necesario */
}

.detail-content h1 {
  font-size: 2em;
  /* Reduce el tamaño del título en móviles */
}

.detail-content p {
  font-size: 1em;
  /* Reduce el tamaño del subtítulo en móviles */
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 16px 16px;
  width: 272px;
  box-shadow: 2px 7px 13px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-color: #000000;
  margin: 20px;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.card-body {
  background-color: #fffcfc;
  flex-grow: 1;
  padding: 10px;
}

.card:hover {
  /* box-shadow: 2px 7px 30px 0px rgba(0, 0, 0, 0.2); */
  /* transition: all 0.3s ease; */
  /* transform: translateY(-5px) scale(1.02); */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

.card-text {
  line-height: 1.4;
  margin: 10px 0px 0px 0px;
  font-size: 17px;
  color: #000000;
}

.card-link {
  color: #b1142e;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.text {
  line-height: 1.4;
  margin: 10px 0px 0px 0px;
  font-size: 17px;
}

.card-block {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  transition: all 0.3s ease-out;
  /* margin-bottom: 25px; */
}

.card figure {
  margin: 10px;
}

.image-container {
  display: block;
  width: 100%;
  height: 100%;
}

.image-page {
  border-radius: 5px;
}

.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 1)
  );
}

.sombra-texto {
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
  /* background-color: rgba(0, 0, 0, 0.8); */
  padding: 5px 10px;
  color: #ffffff;
}

.hero {
  position: relative;
  padding: 0;
  color: #fff;
  height: 80vh;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.separador {
  height: 50px;
  width: 100%;
}

.separador2 {
  height: 30px;
  width: 100%;
}

.separador-body {
  height: 100px;
  width: 100%;
}

.calltoaction {
  background-color: #b1142e;
  width: 100%;
  text-align: center;
  position: relative;
}

.calltoaction2 {
  background-color: #cccccc;
  width: 100%;
  text-align: center;
  position: relative;
  color: #222222;
}

.calltoaction a {
  text-decoration: none;
  color: #ffffff;
  position: relative;
  display: block;
  padding: 50px 10px;
}

.calltoaction2 a {
  text-decoration: none;
  color: #222222;
  position: relative;
  display: block;
  padding: 50px 10px;
  background-color: #b1142e;
}
.calltoaction2 a:visited {
  color: #222222;
}

.calltoaction a:visited {
  color: #ffffff;
}

.calltoaction p {
  margin: 0;
  padding: 0;
  font-size: 24px;
  line-height: 1.4;
}

.calltoaction img {
  width: 30px;
  height: auto;
  top: 5px;
  position: relative;
}

.calltoaction strong {
  font-weight: bold;
}

.section-mapa {
  background-color: #fffffff0;
  height: 60vh;
  width: 100%;
}

.mapa-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.mapa-item {
  flex: 1;
}

.entry-title {
  display: hide;
}

.social-links-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.social-links-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-left: auto;
}

.social-links-footer img {
  width: 55px;
  height: 55px;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
  /* Transición suave para el efecto hover */
}
.social-links-principal img {
  width: 75px;
  height: 75px;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
  /* Transición suave para el efecto hover */
}

.social-links-principal a:hover img {
  transform: scale(1.2);
}

.social-links-footer a:hover img {
  transform: scale(1.2);
}

.hero-flex-container {
  display: flex;
  justify-content: center;
}

.hero-flex-container-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}



/* --- ESTILOS RESPONSIVOS PARA LA FICHA TÉCNICA --- */

/* 1. Contenedor Principal de la Ficha */
.ficha-tecnica-card {
	max-width: 600px;
	/* Limita el ancho máximo para tabletas/escritorio */
	margin: 30px auto;
	/* Centra la tarjeta */
	padding: 20px;
	/* Espacio interior */
	border: 2px solid #5a189a;
	/* Borde morado de ejemplo (ajustar color) */
	border-radius: 12px;
	/* Esquinas redondeadas */
	background-color: #ffffff;
	/* Fondo blanco */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	/* Sombra ligera */
}

.ficha-tecnica-card .cachorros {
	max-width: 1000px;
	
	}

/* 2. Estilos para cada línea de dato - MODO ESCRITORIO (FLEX) */
.dato-perro {
	display: flex;
	/* Usa Flexbox para alinear el título y el valor */
	justify-content: space-between;
	/* Separa el título (left) y el valor (right) */
	align-items: flex-start;
	/* Alinea al inicio si el texto envuelve */
	padding: 8px 0;
	/* Espacio vertical entre líneas */
	border-bottom: 1px dashed #e0e0e0;
	/* Línea de separación suave */
	margin: 0;
	/* Elimina margen por defecto */
	font-size: 1rem;
}

.ficha-tecnica-card a {
    /* Propiedades de visualización */
    display: inline-block; /* NECESARIO para que se comporte como un botón y acepte padding/width */
    
    /* Diseño del botón */
    padding: 10px 20px;
    border: 2px solid #5a189a; /* Borde morado */
    border-radius: 6px;
    background-color: #5a189a; /* Fondo morado */
    
    /* Estilos de texto */
    color: #ffffff !important; /* Texto blanco (¡importante para sobrescribir si es necesario!) */
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    
    /* Transición para efectos de hover suaves */
    transition: all 0.3s ease;
}

/* --- 3. Efecto al pasar el ratón (Hover) --- */
.ficha-tecnica-card a:hover {
    background-color: #ffffff; /* Fondo blanco */
    color: #5a189a !important; /* Texto morado */
    text-decoration: none;
    /* Elimina el efecto de "levantamiento" si no lo quieres */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* Último dato sin línea divisoria (SOLO EN ESCRITORIO) */
.ficha-tecnica-card .dato-perro:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* Estilos de texto en modo escritorio */
.dato-perro strong {
	flex-shrink: 0;
	/* Evita que el strong se encoja */
	margin-right: 15px;
	color: #5a189a;
	/* Color para los títulos */
}

.dato-perro span {
	text-align: right;
	/* Alinea el valor a la derecha */
	flex-grow: 1;
	/* Permite que el valor ocupe el espacio restante */
	color: #333;
}

/* Estilo específico para el bloque de Observaciones (ya se comporta como bloque) */
.dato-perro.observaciones-block,
.dato-perro>strong:only-child,
.dato-perro>span:only-child {
	/* Eliminamos flexbox en el bloque de observaciones para que el contenido fluya */
	display: block;
	width: 100%;
	text-align: left;
}

.dato-perro.observaciones-block strong {
	margin-bottom: 5px;
}

/* 3. Estilos para los datos anidados (Padre/Madre) */
.dato-perro-grupo .sub-dato {
	display: block;
	font-size: 0.9em;
	color: #6c757d;
	margin-top: 3px;
}

/* Ajuste para el texto del carrusel */
.margen-contenido {
	margin: 30px auto;
	max-width: 1200px;
	padding: 0 20px;
}



/* --- MEDIA QUERY PARA MÓVILES (MODO COLUMNA A PARTIR DE 425PX) --- */
@media (max-width: 425px) {
	.ficha-tecnica-card {
		/* Aseguramos que la tarjeta ocupe el ancho disponible sin salirse */
		max-width: 100%;
		width: auto;
		/* Dejamos que el margin/padding lo controlen */
		margin: 20px 10px;
		padding: 15px;
	}

	/* --- MODO COLUMNA: Título arriba, valor abajo --- */
	.dato-perro {
		/* Forzamos el modo columna en todos los campos */
		display: block !important;
		text-align: left;
		padding: 12px 0;
		/* Restauramos el borde inferior */
		border-bottom: 1px dashed #e0e0e0;
	}

	/* Título (strong) */
	.dato-perro strong {
		display: block;
		margin-bottom: 3px;
		margin-right: 0;
		text-align: left;
	}

	/* Valor (span) */
	.dato-perro span {
		text-align: left !important;
		/* Forzamos la alineación a la izquierda */
		display: block;
		word-break: break-word;
		/* Rompe palabras largas */
	}

	/* Los datos anidados (HD/ED de padre/madre) */
	.dato-perro-grupo .sub-dato {
		text-align: left;
	}

	/* El último dato no tiene borde inferior */
	.ficha-tecnica-card .dato-perro:last-child {
		border-bottom: none;
	}
}

/* --- Estilos DATOS VARIABLES ------------------------------------------------------------------------------*/
/* --- Estilos DATOS VARIABLES ------------------------------------------------------------------------------*/
/* --- Estilos DATOS VARIABLES ------------------------------------------------------------------------------*/
/* --- Estilos DATOS VARIABLES ------------------------------------------------------------------------------*/
/* --- Estilos DATOS VARIABLES ------------------------------------------------------------------------------*/
/* Estilo para el título de la entrada */
.entry-title {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #d5bb7e;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 10vh;
  padding-bottom: 10px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

/* * Esto es para eliminar el margen del <header> 
* si es que tu tema lo tiene
*/
.single .entry-header {
  margin-bottom: 0;
}

/* --- La Tarjeta de Datos del Perro (Nuevo Diseño) --- */
.ficha-tecnica-card {
  background-color: #ffffff;
  /* Fondo blanco */
  border-radius: 25px;
  /* Esquinas redondeadas */
  /* Sombra suave para el efecto "card" */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
  border: 3px solid #572175;
  /* Borde sutil */
  padding: 25px;
  margin-bottom: 40px;
  overflow: hidden;
  /* Buena práctica */
}

/* --- Cada fila de datos (Fecha, LOE, etc.) --- */
.ficha-tecnica-card .dato-perro {
  /* ¡LA MAGIA DE LA ALINEACIÓN! */
  display: grid;
  /* Col 1 (Etiqueta) = 180px, Col 2 (Valor) = resto */
  grid-template-columns: 180px 1fr;
  gap: 15px;
  /* Espacio entre etiqueta y valor */

  margin: 0;
  /* Reseteamos el margen del <p> */
  padding: 15px 0;
  /* Espacio vertical para cada fila */
  border-bottom: 1px solid #f0f0f0;
  /* Línea divisoria */
}

/* Última fila sin línea divisoria */
.ficha-tecnica-card .dato-perro:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Primera fila sin padding superior */
.ficha-tecnica-card .dato-perro:first-child {
  padding-top: 0;
}

/* --- La Etiqueta (Fecha, LOE...) --- */
.ficha-tecnica-card .dato-perro strong {
  /* Ya no necesitamos 'display: inline-block' ni 'min-width' */
  font-weight: 600;
  color: #555;
  /* Un gris oscuro, menos fuerte */
  font-size: 1rem;
}

/* --- El Valor (1 de Nov..., 270...) --- */
.ficha-tecnica-card .dato-perro > span {
  font-weight: 500;
  color: #111;
  /* Color de texto principal */
  font-size: 1.1rem;
}

/* --- Sub-datos (HD/ED de los padres) --- */
.ficha-tecnica-card .sub-dato {
  font-style: italic;
  color: #666;
  font-size: 0.9em;
  margin-left: 5px;
}

.carrusel {
  background-color: #f9f9f9;
  /* Mismas esquinas que tu card */
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); */
  /* Misma sombra */
  padding: 60px 25px 25px 25px;
  /* Mismo espaciado interno */
  margin-bottom: 30px;
  /* Espacio para separarlo de los comentarios */
  overflow: hidden;
  /* Buena práctica para que el slider no se "salga" */
}

/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/* Opcional: Ajustes para pantallas un poco más grandes que móvil pero antes del desktop */
@media (max-width: 992px) {
  .content-section {
    gap: 30px;
    /* Ajusta el espacio entre columnas */
    padding: 30px 15px;
    /* Ajusta el padding */
    max-width: 720px;
  }

  .hero-image-container img {
    max-width: none;
    width: 135%;
  }

  .text-column {
    flex: 1.5;
    /* Puedes ajustar la proporción si prefieres */
  }

  .separador {
    height: 30px;
    width: 100%;
  }
}

@media (max-width: 872px) {
  .hero-image-container img {
    width: 110%;
  }

  .custom-button {
    font-size: 13px;
    padding: 8px 5px;
  }
}

/* --- Adaptación a Pantallas Pequeñas (Responsividad) --- */
@media (max-width: 768px) {
  .content-section {
    flex-direction: column;
    /* En pantallas pequeñas, las columnas se apilan verticalmente */
    gap: 30px;
    /* Ajusta el espacio entre las secciones apiladas */
    max-width: 600px;
  }

  .hero-image-container img {
    width: 115%;
  }

  .hero-text {
    font-size: medium;
  }

  .hero-flex-container {
    justify-content: center;
  }

  .detail-section {
    margin-top: 50px;
  }
}

@media (max-width: 620px) {
  .separador {
    height: 0;
  }

  .hero-image-container img {
    width: 180%;
  }
  .hero-flex-container {
    justify-content: start;
  }

  .hero-content {
    margin-top: 230px;
  }

  .content-section {
    max-width: 450px;
  }

  .separador-body {
    height: 500px;
    width: 100%;
  }
}

@media (max-width: 500px) {
  .hero-content {
    margin-top: 200px;
  }

  .separador-body {
    height: 500px;
    width: 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: "Montserrat", -apple-system, BlinkMacSystemFont, "Montserrat",
    "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

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;
}

big {
  font-size: 125%;
}

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

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:hover,
a:focus,
a:active {
  /* color: #b1142e; */
}

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: block;
  /* width: 100%; */
}

.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;
}

.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: 1em; */
}