/* theme.css — estilos base minimalistas para la landing */
:root{
  /* Fallbacks si theme_user.css no está presente */
  --primary-color:#105b63;
  --secondary-color:#18929d;
  --active-color:#a2dda0;
  --soft-color:#f9fefb;
  --highlight-color: rgba(236,138,52,0.5);
  --text-color:#111;
}

/* Base */
html,body{ margin:0; padding:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#fff; color:var(--text-color); }
a{ color: inherit; text-decoration: none; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }

/* =========================
   Botones
   ========================= */
.btn{
  cursor: pointer;
  display: inline-block;
  transition: box-shadow .2s ease, background .2s ease;
}

/* Primario */
.btn-primary{
  background: var(--primary-color);
  color:#fff;
  padding:.6rem 1rem;
  border-radius:.55rem;
  border:0;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background: var(--secondary-color);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Secundario */
.btn-secondary{
  background: transparent;
  border:1px solid var(--primary-color);
  color: var(--primary-color);
  padding:.55rem .9rem;
  border-radius:.55rem;
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  background: rgba(0,0,0,.03);
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

/* =========================
   Header / Menú
   ========================= */
header{ position: sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); backdrop-filter: saturate(180%) blur(6px); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo{ display:flex; align-items:center; gap:.5rem; font-weight:600; }
.logo img{ width:4em; height:4em; display:block; }
.logo a {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: inherit;        /* mantiene el color del texto */
  text-decoration: none; /* quita el subrayado */
}

.menu{ display:flex; gap:1rem; align-items:center; }
.menu a{ padding:.45rem .6rem; border-radius:.5rem; opacity:.9; }
.menu a:not(.btn):hover,
.menu a:not(.btn):focus-visible{ background: rgba(0,0,0,.04); outline:none; }

/* Botón "Contacto" dentro del menú: usa el mismo hover por sombra, sin desplazamiento */
.menu .btn-primary:hover,
.menu .btn-primary:focus-visible{
  background: var(--secondary-color);
  color:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Menú “Más” (desplegable) */
.menu-more{ position: relative; }
.menu-more button{
  all: unset;
  cursor: pointer;
  padding:.45rem .6rem;
  border-radius:.5rem;
  font: inherit;
  color: inherit;
  opacity:.9;
}
.menu-more button:hover,
.menu-more button:focus-visible{ background: rgba(0,0,0,.04); outline:none; }
.menu-more__panel{
  position:absolute; top:100%; left:0; min-width:180px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:none; padding:.35rem; z-index:100;
}
.menu-more__panel a{ display:block; padding:.5rem .6rem; border-radius:.35rem; }
.menu-more__panel a:hover{ background: rgba(0,0,0,.04); }
.menu-more[aria-expanded="true"] .menu-more__panel{ display:block; }


.logo span {
  font-family: 'Press Start 2P', cursive;
  font-size: 1rem;       /* ajusta el tamaño */
  letter-spacing: 0.05em;  /* opcional: separa un poco las letras */
  line-height: 1.2;
}



/* =========================
   Hero
   ========================= */
.hero{ background: var(--soft-color); border-bottom:1px solid rgba(0,0,0,.06); }
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.5rem;
  align-items:center;
  padding:3.5rem 0; /* ← solo vertical; los laterales vienen de .container */
}

/* Márgenes laterales robustos para notch/safe areas (iPhone/iPad) */
.hero{
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

h1{ font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height:1.15; margin:0 0 .8rem 0; }
.subtitle{ font-size:1.05rem; line-height:1.6; opacity:.9; margin:0 0 1.25rem 0; }
.hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }

.bullets{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1rem; margin:1rem 0 0 0; padding:0; list-style:none; }
.bullets li{ position:relative; padding-left:1.35rem; }
.bullets li::before{ content:""; position:absolute; left:0; top:.55rem; width:.55rem; height:.55rem; border-radius:999px; background:var(--primary-color); opacity:.9; }

/* Hero visual: sombra visible y sin recortes */
.hero__visual{ overflow: visible; }
.hero__visual img{
  width:100%; height:auto; display:block; border-radius:.75rem;
  box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 10px 20px rgba(0,0,0,.10);
  background:var(--soft-color);
}

/* =========================
   Secciones / Cards
   ========================= */
section{ padding:3rem 0; }
h2{ font-size: clamp(1.4rem, 2vw, 1.8rem); margin:0 0 1rem 0; }
.lead{ opacity:.9; margin:0 0 1.25rem 0; }

.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; }

.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem;
  padding:1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.card h3{ margin:.4rem 0 .25rem 0; font-size:1.05rem; }
.card p{ margin:0; opacity:.9; }

/* Pasos */
.steps{ counter-reset: paso; display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.step{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:.75rem;
  padding:1rem; position:relative;
}
.step::before{
  counter-increment: paso; content: counter(paso);
  position:absolute; right:1rem; top:1rem; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; background: var(--primary-color); color:#fff;
  font-size:.9rem; font-weight:600;
}

/* =========================
   Taxonomía (logos)
   ========================= */
.logos-taxonomia{
  display:flex; justify-content:center; gap:2rem; margin-top:2rem; flex-wrap:wrap;
}
.logos-taxonomia img{ height:60px; width:auto; transition:transform .2s ease; }
.logos-taxonomia img:hover{ transform:scale(1.05); }

/* Logo MycoBank en texto */
.logo-mycobank{
  font-family: Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: .02em;
}
.logo-mycobank .myco{ color:#D22B2B; font-weight:800; }
.logo-mycobank .bank{ color:#111; font-weight:900; }
@media (min-width:768px){ .logo-mycobank{ font-size:2rem; } }

/* =========================
   Carrusel
   ========================= */
.carousel{ position:relative; border-radius:.75rem; overflow:hidden; border:1px solid rgba(0,0,0,.06); background:#fff; }
.carousel__track{ display:flex; transition: transform .35s ease; }
.carousel__slide{ min-width:100%; user-select:none; }
.carousel__slide img{ display:block; width:100%; height:auto; }
.carousel__nav{
  position:absolute; inset:auto 0 0 0; display:flex; justify-content:center; gap:.35rem; padding:.6rem 0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.85));
}
.dot{ width:10px; height:10px; border-radius:999px; background:rgba(0,0,0,.2); border:0; }
.dot[aria-current="true"]{ background: var(--primary-color); }
.prev, .next{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.1);
  border-radius:.5rem; padding:.35rem .55rem; cursor:pointer;
}
.prev{ left:.5rem; } .next{ right:.5rem; }
.prev:hover, .next:hover{ filter: brightness(.98); }

/* =========================
   Contacto
   ========================= */
.contact{ background: var(--soft-color); border-top:1px solid rgba(0,0,0,.06); }
form{ display:grid; gap:.75rem; max-width:720px; }
input, textarea{ width:100%; padding:.65rem .75rem; border:1px solid rgba(0,0,0,.15); border-radius:.5rem; font: inherit; }
input:focus, textarea:focus{ outline:2px solid var(--highlight-color); outline-offset:2px; }

/* =========================
   Footer
   ========================= */
/* footer{ border-top:1px solid rgba(0,0,0,.06); padding:1.2rem 0; font-size:.95rem; opacity:.9; } */
footer {
  padding:0;            /* ya no tiene padding global */
  border-top: none;     /* quitamos la línea ancha */
}

footer .container {
  border-top:1px solid rgba(0,0,0,.06); /* línea ajustada al ancho estándar */
  padding:1.2rem 0;
  font-size:.95rem;
  opacity:.85;
}

/* =========================
   Seguridad
   ========================= */
.seguridad-grid .card h3{ display:flex; align-items:center; gap:.5rem; }

.seguridad-nota{
  margin-top:1rem; font-size:.95rem; opacity:.9;
  background: rgba(0,0,0,.03); border:1px dashed rgba(0,0,0,.08);
  padding:.75rem 1rem; border-radius:.5rem;
}

.seguridad-metrics{
  display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap;
}
.metric{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:.5rem;
  padding:.6rem .8rem; display:flex; flex-direction:column; align-items:center;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.metric__value{ font-weight:700; font-size:1rem; line-height:1; }
.metric__label{ font-size:.85rem; opacity:.8; }

/* =========================
   Responsive (mobile-first)
   ========================= */
@media (max-width:980px){
  .hero__inner{
    grid-template-columns:1fr;
    padding:2.25rem 0; 
  }
  .bullets, .grid-3, .grid-2, .steps{ grid-template-columns:1fr; }
  .menu{ display:none; }
}

@media (max-width:980px){
  #seguridad .grid-2{ grid-template-columns:1fr; }
  .seguridad-metrics{ justify-content:center; }
}



/* Nota reutilizable para cualquier sección */
.note{
  margin-top: 1rem;
  font-size: .95rem;
  opacity: .9;
  background: rgba(0,0,0,.03);
  border: 1px dashed rgba(0,0,0,.08);
  padding: .75rem 1rem;
  border-radius: .5rem;
}


.hero-title-with-icon {
  display: flex;
  align-items: center;
  gap: .6rem;       /* espacio entre icono y texto */
}

.hero-title-with-icon .hero-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;   /* que no se deforme */
}


.subtitle-with-icon {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.subtitle-with-icon .subtitle-icon {
  flex-shrink: 0;   /* que no se deforme ni ocupe más */
}

.subtitle-with-icon .hero-icon {
  width: 28px;
  height: 28px;
  display: block;
}


/* El contenedor del header debe permitir posicionamiento absoluto */
.nav { position: relative; }

/* Botón de idioma: estilo compacto */
.lang-btn{
  padding:.45rem .8rem;
  font-size:.9rem;
  font-weight:600;
  line-height:1;
}

/* En móvil/tablet vertical: posición fija arriba dcha */
@media (max-width:980px){
  .lang-btn{
    position:absolute;
    top:.6rem;
    right: max(1rem, env(safe-area-inset-right));
    z-index:60; /* por encima del contenido del header */
  }
}

/* En escritorio: que quede al lado del menú */
@media (min-width:981px){
  .lang-btn{ margin-left:.5rem; }
}


/* Cabecera páginas legales */
.legal-title{
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* clave para alinear h1 y p a la derecha */
  gap:.25rem;
}
.legal-title h1{ margin:0; }
.legal-title p{ margin:0; opacity:.7; font-size:.95rem; }

/* Contenedor legal reutilizable (si aún no lo creaste) */
.legal-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Footer legal: dos columnas en desktop, una en móvil */


.footer-copy {
  /* deja que el texto ocupe la primera columna sin empujar la derecha */
  min-width: 0;
}

.footer-links {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;        /* si no caben todos, solo se parte esta col */
  justify-content: flex-end;
}

@media (max-width: 700px) {

  .footer-links {
    justify-content: center;
  }
}