@charset "utf-8";
/* CSS Document */

/* === Tipografía global: Arial === */
:root{
  --font: "Arial", "Helvetica Neue", Helvetica, sans-serif;

  --bg:#f4efec; --txt:#1f2937; --muted:#6b7280; --red:#e11d2a; --red-weak:#ef444466;
  --card:#ffffff; --shadow:0 6px 18px rgba(17,24,39,.08); --radius:16px; --sidebar-w:290px;
  --gap:26px;
}

/* herencia tipográfica global */
*{ box-sizing:border-box; font-family:inherit; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family: var(--font);   /* << Arial global */
  font-weight:400;
  font-size:17px;
  line-height:1.6;
}
li{ text-align:left}
a{color:inherit; text-decoration:none}


  /* Enlaces generales: rojo */
  a:link,
  a:visited {
    color: #d32f2f;
    text-decoration: none;
  }
  a:hover,
  a:focus {
    color: #b71c1c;
    text-decoration: none;
  }
  a:active {
    color: #9a0007;
  }

  /* Variante: enlace oscuro (negro) */
  a.linkoscuro:link,
  a.linkoscuro:visited {
    color:  #666;
    text-decoration: none;
  }
  a.linkoscuro:hover,
  a.linkoscuro:focus {
    color: #b71c1c;
    text-decoration:  none;
  }
  a.linkoscuro:active {
    color: #666;
  }

a.boton-mercado:link  {
  display: inline-block;
  background-color: #d32f2f;   /* rojo */
  color:  #FFF;
  padding: 10px 24px;
  border-radius: 25px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
a.boton-mercado:visited {	color:  #fff}
.boton-mercado {
  display: inline-block;
  background-color: #d32f2f;   /* rojo */
  color:  #FFF;
  padding: 10px 24px;
  border-radius: 25px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
a.boton-mercado:hover {
  background-color: #b71c1c;   /* rojo m�s oscuro al pasar el rat�n */
  color:#FF0;
}
.layout{ max-width:1100px; margin:0 auto; padding:0; display:grid;
  grid-template-columns: var(--sidebar-w) 1fr; gap:28px; min-height:100dvh; }

/* ===== Sidebar ===== */
.sidebar{ position:sticky; top:0; align-self:start; padding:28px 24px 24px; height:100dvh; overflow:auto; background:transparent; background-color: #FFF; margin-bottom:30px }
.logo{ display:flex; align-items:center; justify-content:center; height:150px; text-align:center ; width:100%;  }
.title{ text-align:center; letter-spacing:.5px; line-height:1.4; margin-top:10px;font-size:28px; font-weight:100;border-bottom:#F00 solid 1px; border-top:#F00 solid 1px;color:#F00 }

.tagline{ margin:12px auto 18px; text-align:center; color:var(--muted); max-width:260px; line-height:1.25; color:#999; font-size:14px; }

/* Social */
.social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFF;
  color: #F00;
  font-size: 0.8em;
  text-decoration: none;
  transition: all 0.3s ease;
  border:1px solid #F00
}
/* 🔧 Social hover: antes icono rojo sobre fondo rojo -> invisible */
.soc:hover, .soc:focus-visible {
  background: #e11d2a;      /* rojo */
  color: #fff;              /* icono visible */
  transform: scale(1.1);
  border-color: #e11d2a;
  outline: none;
}

/* ====== 🔧 CAMBIO MENÚ: compatible con botón flecha ====== */
.menu-title{ margin:44px  8px 0px 10px; color:var(--red); letter-spacing:.6px; display:inline-block; font-size:14px }

/* Estructura base */
.menu{ list-style:none; padding:0; margin:6px 0 18px }
/* ====== 🔧 AJUSTE DE MENÚ: alinear texto arriba ====== */
.menu > .menu-item{
  padding:5px 6px;
  border-left:2px solid transparent;
  position:relative;

  /* 🔧 antes: display:flex; align-items:center; */
  display:block;                /* que cada item sea en bloque */
}

/* Dentro de cada item, el enlace y el botón van en línea */
.menu > .menu-item > .item,
.menu > .menu-item > .chev-btn {
  vertical-align:middle;
}

/* Mantén el enlace y flecha en línea horizontal */
.menu > .menu-item > .item {
  display:inline-block;
  width:auto;
}
/* 🔹 Flecha sin "cuadro" ni borde */
.chev-btn {
  width:20px;
  height:20px;
  margin-left:6px;
  display:inline-grid;
  place-items:center;
  background:none;          /* sin fondo */
  border:none;              /* sin borde */
  outline:none;             /* sin borde de enfoque */
  cursor:pointer;
  vertical-align:middle;
  padding:0;
  float:right;
}

/* Opcional: que no aparezca recuadro al hacer foco */
.chev-btn:focus {
  outline:none;
  box-shadow:none;
}

/* 🔹 Flecha (SVG) más discreta */
.chev {
  width:14px;
  height:14px;
  opacity:0.6;
  transition: transform .2s ease, opacity .2s ease;
}
.chev-btn:hover .chev { opacity:1; } /* leve efecto al pasar */.menu-item.is-open > .chev-btn .chev{ transform: rotate(180deg); }

/* Submenú debajo, sin desplazar verticalmente el ítem padre */
.submenu{
  list-style:none;
  padding-left:14px;
  margin:4px 0 0 0;
}
.submenu[hidden]{ display:none !important; }

.submenu li{ padding:6px 2px; color:var(--muted) }
.submenu li a:hover{ color: var(--red) }

/* ===== Main (rejilla 3 columnas) ===== */
.main{ padding:20px 16px 40px 0; }

/* Masonry con columnas */
.cards{
  column-count: 3;          /* 3 columnas en pantallas grandes */
  column-gap: var(--gap);
}

/* Cada card evita romperse entre columnas y deja altura libre según contenido */
.card{
  display: inline-block;     /* necesario para masonry con columns */
  width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid #eee;
  break-inside: avoid;       /* <- clave para masonry */
  margin: 0 0 var(--gap);    /* separación vertical entre cards */
}

/* La imagen puede mantener ratio común (opcional). Si la quitas, también variará por imagen */
.card .cover{
  width:100%;
  aspect-ratio:16/10;        /* puedes comentar esta línea si quieres alturas más "libres" */
  object-fit:cover;
  display:block;
  border-bottom:3px solid var(--red);
}

/* El body ya no fuerza alturas iguales; que fluya */
.card .body{
  padding:18px 20px 10px;
}
.card h3{
  font-size:22px; line-height:1.25; margin:0 0 6px; font-weight:800; text-align:center;
}
.card p{
  color:var(--muted); line-height:1.5; font-size:15px; margin:0;
}
.card .cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red); color:white; border:none; padding:10px 18px;
  border-radius:999px; font-weight:700; letter-spacing:.3px; margin:10px auto 2px;
  cursor:pointer; text-decoration:none;
}
.card .cta .arr{ transition: transform .15s ease }
.card .cta:hover .arr{ transform: translateX(4px) }

.more-wrap{ display:flex; justify-content:center; margin-top:10px; }
#btnMore{ background:#111827; color:#fff; border:0; padding:12px 20px; border-radius:999px; cursor:pointer; font-weight:700;}
#btnMore[disabled]{ opacity:.5; cursor:not-allowed; }

.nos-wrapper {
  padding: 0 20px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #1f2937;
  line-height: 1.6;
}
.nos-wrapper  {
  text-align: center;
  margin:0;
  margin-bottom: 30px;
  font-size: 10px;
  padding-bottom: 10px;
  font-weight:100; 
  background-color:#FFF;
  padding:10px ;
  overflow:hidden
}
.nos-wrapper  h1{
  text-align: center;
  font-size: 24px;
  font-weight:100; 
}
.nos-wrapper p {
  margin-bottom: 1em;
  text-align: justify;
  font-size:12px;
}
.nos-wrapper .dropcap {
  float: left;
  font-size: 8em;
  line-height: 0.9;
  font-weight: 100;
  margin-right: 10px;
  color:#F00;
}
.nos-wrapper a { color: #e11d2a; text-decoration: none; }
.nos-wrapper a:hover { text-decoration: underline; }

.breadcrumb {
  max-width: 800px;
  margin: 0 ;
  padding: 8px 20px;
  font-size: 0.7em;
  color: #444;
  background-color: #FFF;
  gap: 5px;
  border-bottom: 3px solid #e11d2a;text-align:center;
}
.breadcrumb a { color: #e11d2a; text-decoration: none;  }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #444; }
#menu {
  display:  block;      
}
#hambur{
  display:   none;      
}
.DetalleImaxeCapa{
  width:45%;
  float:left;
  height:400px;
  padding-top:30px;
  display:flex;               /* centra con flex */
  align-items:center;         /* centro vertical */
  justify-content:center;     /* centro horizontal */
  overflow:hidden;            /* por si acaso */
  text-align:left;

}

/* Imagen: escalar sin recortar, desde el centro */
.DetalleImaxeCapa img{
  max-width:100%;
  max-height:100%;
  width:auto;                 /* respeta proporci�n */
  height:auto;                /* respeta proporci�n */
  display:block;
  /* sin object-fit: cover; -> NO recorta */
}

.DetalleFichaCapa{width:55%; float:left; height: auto;padding-left:20px; line-height:2em; text-align:left; padding-top:10px }


	

/* ===== Menú lateral refinado ===== */

.menu > .menu-item {
  position: relative;
  border-left: 2px solid transparent;
  padding: 6px 4px;
  margin: 0;
}
.menu > .menu-item:hover {
  background: #ffffffaa;
  border-left-color: var(--red-weak);
}

/* Línea principal: texto a la izquierda, flecha a la derecha */
.menu > .menu-item .menu-line {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Enlace: ocupa todo el espacio disponible */
.menu > .menu-item > .menu-line > .item {
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* Flecha a la derecha */
.menu > .menu-item > .menu-line > .chev-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto; /* 🔧 clave: empuja la flecha al extremo derecho */
}
.chev {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.chev-btn:hover .chev {
  opacity: 1;
}
.menu-item.is-open > .menu-line > .chev-btn .chev {
  transform: rotate(180deg);
}

/* Submenú con animación de apertura */
.submenu {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-left: 14px;
  margin: 0;
  transition: max-height 0.85s ease, opacity 0.85s ease;
}
.menu-item.is-open > .submenu {
  max-height: 2500px;
  opacity: 1;
  margin-top: 4px;
}

/* Elementos del submenú */
.submenu li {
  padding: 4px 2px;
  color: var(--muted);
  font-size: 14px;
}
.submenu li a:hover {
  color: var(--red);
}
/* Submenú con apertura más lenta y suave */
.submenu {
	text-indent: 0;
  list-style: none;
  overflow: hidden;
  max-height: 0;         /* cerrado */
  opacity: 0;
  padding-left: 14px;
  margin: 0;             /* sin salto inicial */
  transition:
    max-height 0.75s cubic-bezier(.25,.8,.25,1), /* 👈 más lento y fluido */
    opacity   0.45s ease;
}

/* cuando el LI tenga .is-open, el JS pondrá max-height dinámico en línea */
.menu-item.is-open > .submenu {
  /* no pongas max-height aquí, lo maneja el JS con px reales */
  margin-top: 4px;
}

/* si tienes esto en tu CSS antiguo, anúlalo para que no corte la animación: */
.submenu[hidden] { display: block !important; }  /* 👈 evita display:none */
/* ===== Puntos grises casi imperceptibles ===== */

/* Oculta los marcadores nativos */
.menu, .submenu {
  list-style: none;
 
}

/* Aplica el punto a cada elemento */
.menu > .menu-item::before,
.submenu > li::before {
  content:  "•";               /* el punto clásico */
  color:   #666;                 /* gris tenue (puedes probar #bbb o #aaa) */
  opacity: 0.4;                /* hace que sea "casi imperceptible" */
  font-size: 0.9em;            /* más pequeño que el texto */
  margin-right: 6px;
  position: relative;
}

/* Espaciado correcto: aplicamos inline-flex al texto */
.menu > .menu-item,
.submenu > li {
  gap: 4px;
}
.credits{ font-size:0.8em}
.langs{ font-size:12px; text-align:center;margin-top:40px}

/* 🧩 CORRECCIÓN DE ALINEACIÓN DE VIÑETAS EN SUBMENÚ */
.submenu-item,
.submenu li {
  position: relative;
  list-style: none;
  padding-left: 16px;  /* deja hueco para el punto */
  text-indent: 0;      /* evita sangría doble */
}

.submenu-item::before,
.submenu li::before {
  content: "•";
  color: #666;
  opacity: 0.5;
  position: absolute;
  left: 0;             /* punto en el borde izquierdo del hueco */
  top: 0.2em;          /* lo centra verticalmente respecto al texto */
}

.listados{width:80%; margin-left:10%; font-size:1.3em; height:200px; margin-right:10%; margin-top:20px;}

.nos-wrapperAb  {
  text-align:  left;
  margin:0;
  margin-bottom: 30px;
  font-size: 12px;
 
   padding: 0 20px;
  line-height: 1.6;
  background-color:#FFF;
  padding:10px ;
  overflow:hidden;
  width:100%; margin:0;
   padding: 0 80px;
}
.nos-wrapperAb  h1{ text-align:center}
.nos-wrapperAb .dropcap {
  float: left;
  font-size: 8em;
  line-height: 0.9;
  font-weight: 100;
  margin-right: 10px;
  color:#F00;
}

@media (max-width: 1100px){
  :root{ --sidebar-w: 300px; }
  .title {font-size:24px}
  

}
@media (max-width: 1000px){
	
	.DetalleImaxeCapa{width:300px; margin-left: 50%;  transform: translateX(-50%); }
	
.DetalleFichaCapa{width:100%; border-bottom:1px solid  #999; border-top:1px solid #999; }
	
	.DetalleFichaCapa{margin-top:30px; } 
	.cards{ column-count: 2; }
	.nos-wrapperAb  { padding: 0 5px;}
	}
@media (max-width: 790px){  
body{ color: #333; 
font-weight: 500;
}
.title{  font-weight:500; }
.nos-wrapper  {
  font-weight:500;
}
.nos-wrapper  h1{
   font-weight:500;
}

.nos-wrapper .dropcap {
   font-weight:500;
}
.listados{width:98%; margin-left:1%; font-size:1.3em; height: auto; margin-right:1%; margin-top:20px; overflow:hidden}

.DetalleImaxeCapa{width:45%;margin-left:0;transform: translateX(0);}
  .DetalleFichaCapa{width:55%; border: none }
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position:relative; height:auto }
  .main{ padding: 0 16px 40px }
 
 .langs{margin-top:10px}
  .DetalleFichaCapa{margin-top:0px; }
  
  #hambur{
  display:  block; padding:5px     
}
  #menu {
  display: none;     
}

.menu-title{ width:100px;  padding:10px 12px; color:#F00; cursor:pointer; border: #999 1px solid; text-align:center;  margin-left: 50%;  transform: translateX(-50%); margin-bottom:20px; margin-top:20px;}

@media (max-width: 640px){
	
	.DetalleImaxeCapa{width:100%; float:left; height: auto; text-align:left; margin-top:30px }


.DetalleFichaCapa{width:100%; float:left; height: auto;padding-left:20px; line-height:2em; text-align:left; padding-top:0; border-bottom:1px solid  #999; border-top:1px solid #999; margin-top:10px }
}
  .cards{ column-count: 1; }
}