/* RESET BÁSICO y SCROLL SUAVE */

html { scroll-behavior: smooth; }

body { margin:0; padding:0; font-family:'Inter',sans-serif; background:#f8f8f3; color:#1f2e2d; line-height:1.7; }



/* CABECERA y NAVEGACIÓN */

header { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000; padding: 0.5rem 0; }

nav { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 1.5rem; max-width:1200px; margin:auto; position:relative; }

.logo img { height:60px; margin: 0.3rem 0; }

.menu-toggle { display:none; font-size:1.5rem; cursor:pointer; color:#1f2e2d; }

.nav-list { list-style:none; display:flex; gap:1.8rem; margin:0; padding:0.5rem 0; }

.nav-list li a { text-decoration:none; color:#1f2e2d; font-weight:600; transition:color .3s; padding: 0.3rem 0; }

.nav-list li a:hover { color:#104c3f; }

.nav-list a.active { color:#104c3f; font-weight:700; border-bottom:2px solid #104c3f; }



/* CONTENEDORES GENERALES */

.container { padding:1rem; max-width:1200px; margin:auto; text-align:center; }

section { padding:2rem 1.5rem; max-width:1200px; margin:auto; scroll-margin-top:70px; }

.section-title { font-size:2rem; margin-bottom:1rem; color:#104c3f; margin-top: 0.8rem; }



/* HERO */

.hero-title { font-size:2.5rem; font-weight:700; margin:0.5rem 0; }

.hero-subtitle { font-size:1.2rem; max-width:700px; margin:1.5rem auto; text-align: center;}

.hero img { max-width:100%; height:auto; margin-top:2rem; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.1); }

.button { background:#104c3f; color:#fff; padding:0.85rem 1.7rem; border-radius:8px; text-decoration:none; font-weight:600; display:inline-block; margin-top:1.5rem; transition:background .3s; }

.button:hover { background:#0d3c32; }

.subtle-link {
  margin: 0.5rem 0;
}
.subtle-link a {
  font-size: 0.9rem;
  color: var(--primary-color);       /* o el color de acento que uses */
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.subtle-link a:hover {
  opacity: 1;
  text-decoration: underline;
}


/* Ajusta el tamaño de la imagen principal en el hero */

.hero .img-principal {

  display: block;      /* así puedes centrarla si quieres */

  width: 100%;         /* escala al 100% del contenedor */

  max-width: 600px;    /* pero no pase de 300px de ancho */

  height: auto;        /* mantiene proporción */

  margin: 2rem auto;   /* separa y centra horizontalmente */

}
.por-que {
  padding: 4rem 1rem;
  background-color: #f9fafb;
}

/* Título centrado */
.por-que .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #0f172a;
}

/* Contenedor .content centrado */
.feature-card .content {
  display: flex;               /* activa flexbox */
  flex-direction: column;      /* apila párrafos en columna */
  align-items: center;         /* centra cada párrafo horizontalmente */
  text-align: center;          /* centra el texto dentro de cada párrafo */
  padding-top: 1rem;           /* solo espacio arriba, nada a los lados */
  padding-left: 0;             /* elimina padding lateral */
  padding-right: 0;
  width: 100%;                 /* que ocupe todo el ancho interno */
  box-sizing: border-box;      /* para que el padding no la haga más ancha */
}

/* Ajusta el espacio entre párrafos */
.feature-card .content p {
  margin: 0.75rem 0;
  width: auto;                 /* que el párrafo tenga solo el ancho necesario */
  max-width: 90%;              /* opcional: evita que se extienda demasiado */
}

/* Y asegúrate de que el botón no genere padding extra en el contenedor */
.toggle-btn {
  display: block;
  margin: 1rem auto;
}

.contact-btn {
  display: inline-block;
  margin: 0.5rem auto 1rem;
  padding: 0.5rem 1rem;
  background: #104c3f;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.info-anchor {
  display: inline-block;
  margin: 0.5rem auto 1rem;
  padding: 0.5rem 1rem;
  background: #104c3f;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-decoration: none;
}

.casos-anchor {
  display: inline-block;
  margin: 0.3rem auto 0.5rem;
  padding: 0.2rem 1rem;
  background: #104c3f;
  color: #fff;
  border: none;
  border-radius: 0.2rem;
  cursor: pointer;
  text-decoration: none;
}


.contact-btn:hover {
  background: #0d3c32;
}


/* Grid de tarjetas */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2rem;
}

/* Estilo de cada tarjeta */
.feature-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card > p {
  margin-bottom: 1rem;
}

.feature-card .toggle-btn {
  display: block;        /* para que margin funcione bien */
  margin: 1rem auto 0;   /* 1rem arriba, 0 abajo, centrado */
}

.feature-card .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fuerza al icono+h3 a ocupar siempre el mismo hueco */
  min-height: 8rem;
  /* separa el header del párrafo */
  margin-bottom: 1rem;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card .icon {
  display: block;        
  width: 3.5rem;         
  height: auto;         
  object-fit: contain;   
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .feature-card .icon {
    width: 2.5rem;      /* aprox 40px en pantallas <768px */
  }
}

/* Título de la tarjeta */
.feature-card h3 {
  font-size: 1.3rem;
  text-align: center;
  margin: 0;
}

/* Párrafo descriptivo */
.feature-card p {
  text-align: center;
  line-height: 1.6;
  color: #475569;
  margin: 0;
  /* si quieres que el texto ocupe todo el ancho posible */
  width: 100%;
}


/* LISTA DE BENEFICIOS (INDEX "Por qué Wortia") */

.features { list-style:none; padding:0.5rem; max-width:600px; margin:2.5rem auto; text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }

.feature { display:flex; align-items:center; gap:0.7rem; padding: 0.4rem 0; }

.feature-icon { color:#104c3f; font-size:1.5rem; }



/* STEPS (Cómo Funciona) */

.steps-container { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; margin-top:2.5rem; }

.step-box { background:#fff; padding:1.8rem; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05); text-align:center; flex:0 1 250px; transition:transform .3s, box-shadow .3s; }

.step-box:hover { transform:translateY(-5px); box-shadow:0 6px 18px rgba(0,0,0,0.1); }

.step-number { background:#104c3f; color:#fff; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.3rem; font-size:30px; transition:transform .3s, background .3s; }

.step-box:hover .step-number { transform:scale(1.1); background:#0d3c32; }

.step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 6.5rem;
  margin-bottom: 1rem;
}

.step-box p {
  flex: none;
  margin: 0;
  text-align: center;
  color: #475569;
  line-height: 1.6;
}

.imagencomofunciona {
  display: block;         
  margin: 0 auto 2rem;  
  max-width: 500px;       
  width: 100%;           
  height: auto;          

  padding: 0.5rem;                 
  border-radius: 0.75rem;         
  background: #ffffff;            
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}




/* CASOS */

/* Contenedor y título */
.cases {
  padding: 4rem 1rem;
  background-color: #f9fafb;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.cases-title {
  text-align: center;
  font-size: 2.25rem;
  margin-bottom: 2.5rem;
  color: #0f172a;
}

/* Grid responsive */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

/* Tarjeta */
.case-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Figura + métricas */
.case-figure {
  position: relative;
  height: auto;
  overflow: hidden;
}
.case-figure img {
  width: 100%;
  display: block;
  object-fit: cover;
}


.case-metrics {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(10, 37, 64, 0.85);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.75rem;
}

/* Contenido textual */
.case-content {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.case-heading {
  font-size: 1.375rem;
  margin: 0 0 0.75rem;
  color: #0a2540;
}
.case-description {
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 1.5rem;
  text-align: left;
}

/* Botón CTA */
.case-cta {
  align-self: flex-start;
  font-weight: 500;
  text-decoration: none;
  color: #064e3b;
  padding: 0.5rem 1rem;
  border: 2px solid #064e3b;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}
.case-cta:hover {
  background: #064e3b;
  color: #fff;
}

/* Verticales*/
  .sectores-renovado {
    padding: 4rem 1.5rem;
    background: inherit;
  }
  .sectores-renovado-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #104c3f;
  }

  /* — Grid — */
  .sectores-renovado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* — Tarjeta — */
  .sector-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform .3s, box-shadow .3s;
  }
  .sector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  }

  /* — Header — */
  .sector-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .sector-card-icon {
    width: 56px;
    height: 56px;
    background: #f8f8f3;
    padding: .4rem;
    border-radius: .6rem;
    object-fit: contain;
  }
  .sector-card-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #104c3f;
  }
  .sector-card-header p {
    margin: .3rem 0 0;
    font-size: .95rem;
    color: #1f2e2d;
  }

  /* — Opciones — */
  .sector-card-options {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .sector-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8f8f3;
    border: 1px solid #eaeaea;
    border-radius: .8rem;
    padding: 1rem;
    transition: background .3s;
  }
  .sector-option:hover {
    background: #fff;
  }
  .sector-option h4 {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
    color: #104c3f;
  }
  .sector-option p {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: #1f2e2d;
  }

  /* — Contenedor de acciones — */
  .option-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* — Botones idénticos en tamaño — */
  .option-actions a,
  .option-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;           /* misma altura */
    padding: 0 16px;        /* mismo padding horizontal */
    font-size: .95rem;
    font-weight: 600;
    border-radius: .5rem;
    white-space: nowrap;
    box-sizing: border-box;
    text-decoration: none;
    transition: background .3s, color .3s;
  }

  /* — Ghost-button — */
  .option-actions a {
    border: 1px solid #104c3f;
    background: transparent;
    color: #104c3f;
  }
  .option-actions a:hover {
    background: #104c3f;
    color: #fff;
  }

  /* — Solid-button — */
  .option-actions button {
    border: none;
    background: #104c3f;
    color: #fff;
    cursor: pointer;
  }
  .option-actions button:hover {
    background: #0d3c32;
  }
  .option-actions {
  align-items: center; /* ya lo tienes, pero por si acaso */
}

/* Quita cualquier margen extra y fuerza centrar cada control */
.option-actions a,
.option-actions button {
  margin: 0;
  align-self: center;
  vertical-align: middle;
}




/* FORMULARIO (Contacto) */

form { max-width:500px; margin:2.5rem auto; text-align:left; padding: 0 1rem; }

label { display:block; margin-top:1.2rem; }

input, textarea { width:100%; padding:0.7rem; margin-top:0.6rem; border:1px solid #ccc; border-radius:5px; }

button { margin-top:1.5rem; background:#104c3f; color:#fff; padding:0.85rem 1.7rem; border:none; border-radius:5px; font-weight:bold; cursor:pointer; }



/* TABLAS (Planes) */

table { width:100%; border-collapse:collapse; margin:1.5rem auto; }

th, td { padding:0.9rem; border:1px solid #ddd; }

th { background:#e7f4f1; }



/* NOSOTROS */

p { max-width:800px; margin:1.3rem auto; line-height:1.7; text-align:left; padding: 0 1rem; }

.sobre-nosotros-img{
  display: block;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .sobre-nosotros-img {
    max-width: 200px; /* ajusta según convenga */
  }
}

.internalia-img{
  display: block;
  margin: 0 auto;
  width: 40%;
  height: 50%;
}

@media (max-width: 480px) {
  .sobre-nosotros-img {
    max-width: 200px; /* ajusta según convenga */
  }
}

.legalidad-section {
  display: flex;
  justify-content: center;
  padding: 2em;
}

.legalidad-content {
  display: flex;
  flex-wrap: nowrap;         /* evita que la imagen baje */
  align-items: flex-start;   /* alineados por arriba */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.legalidad-text {
  flex: 0 0 60%;             /* ocupa siempre el 60% */
}

.legalidad-image {
  flex: 0 0 40%;             /* ocupa siempre el 40% */
  display: flex;
  justify-content: flex-end; /* empuja la imagen a la derecha */
  align-items: flex-start;   /* arranca en la misma altura que el texto */
}

.legalidad-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 300px;         /* tu alto deseado */
  object-fit: contain;
}

.grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem; /* coincide con tus gaps */
}



/* FOOTER */

footer {

  background: #104c3f;

  padding: 1.5rem;

  text-align: center;

  font-size: 0.95rem;

  color: white;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin-top: 2rem;

}



footer p {

  margin: 0.7rem 0 0.5rem;

  color: white;

}



footer a {

  color: white;

  text-decoration: underline;

  font-weight: 600;

  padding: 0.2rem 0;

}



footer img {

  height: 98px;

  margin-top: 0.5rem;

  margin-bottom: 0.5rem;

}




/* MEDIA QUERIES */

@media(max-width:768px) {

  .nav-list { display:none; flex-direction:column; position:absolute; top:70px; right:20px; background:#fff; padding:1.2rem; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.15); }

  .nav-list.active { display:flex; }

  .menu-toggle { display:block; }

  .hero-title { font-size:1.8rem; }

  .section-title { font-size:1.6rem; }

  .hero-subtitle { font-size:1rem; }

  section { padding:2rem 1.2rem; }

  .container { padding:0.7rem 1.2rem; }

  .features { grid-template-columns:1fr; gap:1rem; }

  .steps-container { gap:1.2rem; }

  .step-box { padding:1.2rem; flex:0 1 100%; }

  table { display:block; overflow-x:auto; }

}



@media(max-width:480px) {

  nav { padding:0.3rem 0.9rem; }

  .logo img { height:50px; }

  .hero-title { font-size:1.5rem; }

  .section-title { font-size:1.4rem; }

  section { padding:1.5rem 1rem; }

  input, textarea, button { width:100%; }

  form { padding:0 1rem; }

  .hero .img-principal { max-width:100%; }

  #casos article img { max-width:100%; }

  footer img { height:70px; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  grid-auto-rows: 1fr;   
  gap: 2rem;
  align-items: start;    
}

.feature-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 0.5rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.feature-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.feature-card summary::-webkit-details-marker {
  display: none; /* quita el triángulo por defecto */
}
  .case-card {
    width: 90%;       
    max-width: none;   
  }


  .case-metrics span {
    font-size: 0.75rem;   
    line-height: 1.4;     
  }

  #casos {
  background: transparent !important;
  padding: 2rem 1.5rem !important;
  max-width: 1200px;
  margin: 0 auto;
}

#casos .cases-title {

  color: #104c3f !important;
  font-size: 2rem !important;
  margin: 0.8rem 0 1rem !important;
  text-align: center !important;
  font-weight: inherit !important;
}


#casos p {
  color: inherit;
  max-width: 700px;
  margin: 1rem auto;
  font-size: 1rem;
  line-height: 1.6;
}
#casos .button {
  margin-top: 1.5rem;
}


#casos .cases-grid {
  gap: 2rem;
  padding: 0;
}

}