@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
html {
  overflow-y: auto;
}
img,
audio,
video,
canvas {
    width: 100%;
    height: auto;
    max-width: 1024px;
}
/*generales*/
a:link {color: #fe6666; text-decoration: none } 
a:visited {color: inherit;}
body {	font-family: 'Roboto', sans-serif;}
h1 {font-weight: bolder;text-transform:uppercase;color:#036;font-size:26px;text-align:center;font-family: 'Roboto', sans-serif;}
h2 {font-weight: bolder;color: #666;font-size:1.05em;text-align:center;font-family: 'Roboto', sans-serif;}
footer {
	display:block;
	text-align:center;
	background:	#fff;
	width:100%;
	margin:50px 0 0 0;
}
.header {
    display: flex;
    flex-direction: column;
    max-width: 1024px;
    margin: 0 auto;}
#logo {
	float:left;
	background:url(../nueva/img/oyp-color.png) top left no-repeat;
    max-width: 260px;
	width: 50%;
	height: auto;
	display: block;
    margin: 2% 0;
}
.buscador-contenedor{
  display:flex;
  justify-content:center;
}

.buscador-contenedor .gcse-search{
  margin:0 auto;
}

.direccion {color: #fff; font-size: 0.7em;}
.ruta {
    max-width: 1300px; /* El mismo ancho máximo que tu .contenedor-sumario */
    margin: 0 auto;    /* Centra el bloque en la pantalla */
}
.edicion {
    /*max-width: 1300px;*/
    margin: 10px auto;
}

.edicion img {
    max-width: 100%;
    height: auto;
    display: block;
}
.contenedor-sumario {
    display: grid;
    /* Define columnas dinámicas: mínimo 300px, máximo dividirse el espacio equitativamente */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; /* Espacio de separación entre las tarjetas */
    padding: 20px;
    max-width: 1300px; /* Ancho máximo de la zona de contenidos */
    margin: 0 auto; /* Centra todo el bloque en la pantalla */
    box-sizing: border-box;
}

/* 2. DISEÑO MODERNO DE LA TARJETA */
.nota-sumario {
    background-color: #ffffff;
    border: 2px solid #F66;
    border-radius: 12px;
    padding: 25px;
    box-sizing: border-box;
    
    position: relative;
    overflow: hidden; /* Evita que la imagen se salga del contenedor al agrandarse */
    
    /* Sombra suavizada */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 
                0 4px 12px rgba(0, 0, 0, 0.03);
    
    /* Flexbox interno: asegura una distribución vertical limpia */
    display: flex;
    flex-direction: column;
}

/* Título de la nota */
.nota-sumario h2 {
    color: #0b0c10;
    font-size: 24px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Firma */
.nota-sumario .firma {
    display: block;
    color: #65676b;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Bloque de la bajada */
.nota-sumario .bajada {
    color: #2d3139;
    font-size: 17px;
    line-height: 1.6;
}

.nota-sumario .bajada h2,
.nota-sumario .bajada p {
    font-size: 17px;
    color: #2d3139;
    margin: 0;
    line-height: 1.6;
}
.nota-sumario .enlace-leer:link,
.nota-sumario .enlace-leer:visited {
    color: #F66; 
    text-decoration: none; 
}
.nota-sumario .enlace-leer:hover,
.nota-sumario .enlace-leer:active {
    color: #d54b4b; /* Un tono un poco más oscuro */
}
.nota-sumario img {
    display: block;
    width: calc(100% + 50px);      /* 100% del ancho + 25px izquierdo + 25px derecho */
    height: 220px;    
    margin-left: -25px;            /* Mueve la imagen hacia la izquierda sobre el padding */
    margin-top: -25px;             /* Mueve la imagen hacia arriba para pegarla al borde superior */
    object-fit: cover;               /* Recorta y escala la foto sin deformarla ni estirarla */
    border-radius: 11px 11px 0 0;      /* Redondeado sutil alineado con la tarjeta */
    margin-bottom: 20px;                 /* Despega la imagen del título */
    transition: transform 0.4s ease-in-out; /* Controla la velocidad y suavidad del efecto */ 
}

.nota-sumario:hover img {
    transform: scale(1.08); /* Aumenta el tamaño un 8%. Modifica este valor si quieres más o menos zoom */
    filter: saturate (80%) sepia(50%) brightness(50%) contrast(110%); /* Opción A: Estilo cálido/editorial */
    /* filter: grayscale(40%) contrast(120%); */       /* Opción B: Estilo periodístico sobrio */
    opacity: 0.9;
}
.nota-sumario:hover h2 {
    color: #F66;
}
.nota-sumario:hover .firma {
    color: #d54b4b; /* Se oscurece para ganar contraste */
}
.nota-sumario:hover .bajada {
    color: #F66;
}
#fecha_revista {
	float:right;
	text-align:right;
	margin-bottom: 15px;
}
#fecha_revista, #ruta_anteriores {
	font:12px 'Roboto', sans-serif;
}

a.ref:link { text-decoration: none; }
#ruta_anteriores {line-height:20px; clear:both; 	}
#ruta_anteriores ul {padding-left: 0 !important;}
#ruta_anteriores ul li { background: url(../nueva/img/bg_tag.png) no-repeat 0 0; float: left; height: 19px; padding-left: 10px; list-style: none; margin: 2px;}
#ruta_anteriores ul li a { background: url(../nueva/img/bg_tag.png) repeat-x 0 -38px; color: #fff; float: left; font-weight: bold; height: 19px; text-decoration: none;}
#ruta_anteriores ul li a:hover { color: #fc0;}
#ruta_anteriores ul li span { background: url(../nueva/img/bg_tag.png) no-repeat 0 -19px; float: left; height: 19px; width: 10px;}