/* ==========================================================
   MediTecnoloogy - Hoja de estilos principal
   Estilo "Web 2.0" (circa 2010)
   ========================================================== */

/* ---------- Reinicio básico ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { border: 0; vertical-align: middle; }
ul, ol { list-style: none; }

html { scroll-behavior: smooth; }

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  /* Fondo exterior degradado verde a azul claro */
  background: #8fd6c8;
  background: linear-gradient(to bottom, #6fcf4a 0%, #a8e6a1 30%, #9fdcf0 70%, #d5f1fb 100%) fixed;
  padding: 20px 0 30px;
}

a { color: #1a7fd1; }
a:hover { color: #e86b00; }

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  text-shadow: 1px 1px 0 #fff, 2px 2px 3px rgba(0, 0, 0, 0.25);
}

/* ---------- Contenedor centrado de 960 px ---------- */
#contenedor {
  width: 960px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #7fb87a;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 60, 40, 0.35);
  overflow: hidden;
}

/* ==========================================================
   ENCABEZADO
   ========================================================== */
#encabezado {
  position: relative;
  height: 178px;
  padding: 18px 25px 0;
  background: linear-gradient(to bottom, #ffffff 0%, #f1fbe9 60%, #dcf3cc 100%);
  border-bottom: 1px solid #b9dfa5;
}

.logo {
  display: inline-flex;
  align-items: flex-start;
  text-decoration: none;
}

.logo-imagen {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 12px;
}

/* Efecto de reflejo debajo del logotipo */
.logo-imagen .reflejo {
  position: absolute;
  left: 0;
  top: 80px;
  transform: scaleY(-1);
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 55%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 55%);
}

.logo-texto { display: inline-block; padding-top: 8px; position: relative; }

.logo-nombre {
  display: block;
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -1.5px;
  line-height: 1;
  color: #3aa312;
  text-shadow: 0 1px 0 #fff, 0 2px 0 #c7eab3, 2px 4px 5px rgba(0, 0, 0, 0.3);
}
.logo-nombre em {
  font-style: normal;
  color: #1a7fd1;
  text-shadow: 0 1px 0 #fff, 0 2px 0 #b9dcf5, 2px 4px 5px rgba(0, 0, 0, 0.3);
}

.logo-lema {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #5e7f55;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Etiqueta BETA junto al logo */
.etiqueta-beta {
  display: inline-block;
  margin: 10px 0 0 8px;
  padding: 2px 8px;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to bottom, #ff7a7a 0%, #e12b2b 50%, #c41414 51%, #d92020 100%);
  border: 1px solid #a00;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-6deg);
}

/* Estrella explosiva "¡NUEVO!" */
.estrella-nuevo {
  position: absolute;
  left: 545px;
  top: 14px;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.35));
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.08); }
}

.encabezado-derecha {
  position: absolute;
  right: 25px;
  top: 30px;
  text-align: right;
}
.telefono {
  font-size: 12px;
  color: #555;
  margin-bottom: 10px;
}
.telefono strong { color: #e86b00; font-size: 14px; }

/* ==========================================================
   BOTONES GLOSSY
   ========================================================== */
.boton {
  display: inline-block;
  position: relative;
  padding: 10px 26px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.45);
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  transition: transform 0.1s, box-shadow 0.1s;
}
/* Brillo superior "glossy" */
.boton::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 1px;
  height: 50%;
  border-radius: 18px 18px 40% 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1));
  pointer-events: none;
}
.boton:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.boton:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.25); }

.boton-verde {
  background: linear-gradient(to bottom, #9be74f 0%, #5cc61a 50%, #46a80c 51%, #5ec41c 100%);
  border-color: #2f7f05;
}
.boton-verde:hover { background: linear-gradient(to bottom, #aef065 0%, #6ad428 50%, #4fb812 51%, #6ad428 100%); }

.boton-naranja {
  background: linear-gradient(to bottom, #ffc15e 0%, #ff9200 50%, #ef7d00 51%, #ff9a10 100%);
  border-color: #b35a00;
}
.boton-naranja:hover { background: linear-gradient(to bottom, #ffd07e 0%, #ffa21a 50%, #ff8c00 51%, #ffaa2a 100%); }

.boton-azul {
  background: linear-gradient(to bottom, #8fd8ff 0%, #2f9be8 50%, #1a7fd1 51%, #2f9be8 100%);
  border-color: #105a96;
}
.boton-azul:hover { background: linear-gradient(to bottom, #a6e1ff 0%, #44aaf0 50%, #238ee0 51%, #44aaf0 100%); }

.boton-grande { padding: 14px 40px; font-size: 22px; border-radius: 30px; }
.boton-grande::before { border-radius: 28px 28px 40% 40%; }
.boton-chico  { padding: 5px 16px; font-size: 12px; border-radius: 14px; }

/* ==========================================================
   MENÚ HORIZONTAL CON PESTAÑAS
   ========================================================== */
#menu {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  margin-top: -38px;
  position: relative;
  z-index: 2;
  border-bottom: 5px solid #3aa312;
}
#menu li a {
  display: block;
  padding: 9px 22px 7px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #2f5f1f;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  background: linear-gradient(to bottom, #ffffff 0%, #e4f3dc 50%, #cfe9c1 51%, #e0f2d6 100%);
  border: 1px solid #a5cf8f;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px 0 #fff;
}
#menu li a:hover {
  color: #e86b00;
  background: linear-gradient(to bottom, #ffffff 0%, #fff4dc 50%, #ffe6b5 51%, #fff1d1 100%);
  border-color: #f0b660;
}
#menu li a.activo {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(to bottom, #9be74f 0%, #5cc61a 50%, #46a80c 51%, #3aa312 100%);
  border-color: #2f7f05;
}

/* ==========================================================
   CONTENIDO GENERAL
   ========================================================== */
#contenido { padding: 0; }

.seccion { padding: 35px 30px 40px; border-bottom: 1px solid #e3eadf; }
.seccion-gris {
  background: linear-gradient(to bottom, #f6f9f4 0%, #edf3ea 100%);
}

.titulo-seccion {
  font-size: 28px;
  color: #3aa312;
  margin-bottom: 6px;
  padding-left: 14px;
  border-left: 6px solid #74d61f;
}
.intro-seccion {
  font-size: 14px;
  color: #666;
  margin-bottom: 25px;
  padding-left: 20px;
}

/* Caja con esquinas redondeadas y borde punteado */
.caja-punteada {
  background: linear-gradient(to bottom, #ffffff 0%, #f5fbf1 100%);
  border: 2px dashed #9bd27e;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Lista con palomitas */
.lista-palomitas li {
  padding: 3px 0 3px 26px;
  background: url("../img/iconos/palomita.svg") no-repeat 0 5px;
  background-size: 18px 18px;
}

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  display: flex;
  gap: 30px;
  padding: 35px 30px 45px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(159, 220, 240, 0.55), transparent 60%),
    linear-gradient(to bottom, #f8fdf4 0%, #ffffff 100%);
  border-bottom: 1px solid #e3eadf;
}
.hero-texto { flex: 1 1 52%; }
.hero h1 {
  font-size: 34px;
  line-height: 1.15;
  color: #2f8a0c;
  margin-bottom: 14px;
}
.subtitulo { font-size: 15px; margin-bottom: 14px; color: #444; }
.hero .lista-palomitas { margin-bottom: 24px; font-size: 13px; }
.nota-boton { margin-top: 10px; font-size: 11px; color: #888; padding-left: 20px; }

/* Ventana falsa con "captura" del sistema */
.hero-captura { flex: 1 1 48%; padding-top: 10px; }
.ventana {
  border: 1px solid #8aa0b3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 40, 80, 0.3);
  overflow: hidden;
  transform: perspective(900px) rotateY(-8deg);
}
.ventana-barra {
  height: 26px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(to bottom, #f3f6f9 0%, #d3dde6 50%, #c2cfdb 51%, #d6e0e9 100%);
  border-bottom: 1px solid #9fb0c0;
}
.punto { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 0 0 1px rgba(0,0,0,0.25); }
.punto.rojo     { background: radial-gradient(circle at 40% 35%, #ff9a9a, #d61b1b); }
.punto.amarillo { background: radial-gradient(circle at 40% 35%, #fff2a0, #f0b400); }
.punto.verde    { background: radial-gradient(circle at 40% 35%, #c4f59a, #3aa312); }
.ventana-titulo { margin-left: 10px; font-size: 11px; color: #44576a; text-shadow: 0 1px 0 #fff; }

.ventana-cuerpo { display: flex; height: 230px; font-size: 11px; }
.ventana-lateral {
  width: 100px;
  background: linear-gradient(to bottom, #e9f6e1, #d4ecc6);
  border-right: 1px solid #b9dfa5;
  padding-top: 8px;
}
.lateral-item { padding: 6px 10px; color: #2f5f1f; border-bottom: 1px solid #cde5bf; }
.lateral-item.sel {
  color: #fff;
  font-weight: bold;
  background: linear-gradient(to bottom, #9be74f, #46a80c);
}
.ventana-principal { flex: 1; padding: 10px; }
.buscador-falso {
  border: 1px solid #b7c4cf;
  border-radius: 12px;
  padding: 3px 10px 3px 24px;
  color: #999;
  background: #fff url("../img/iconos/busqueda.svg") no-repeat 5px center;
  background-size: 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
}
.ficha { display: flex; gap: 10px; margin-bottom: 10px; line-height: 1.5; }
.ficha-foto {
  width: 44px; height: 44px; border-radius: 6px;
  background: linear-gradient(to bottom, #cfe6f7, #8fb8d8);
  border: 1px solid #7a9fc0;
  position: relative;
}
.ficha-foto::after {
  content: ""; position: absolute; left: 13px; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; opacity: 0.85;
  box-shadow: 0 20px 0 6px #fff;
}
.ficha-foto { overflow: hidden; }
.tabla-falsa { width: 100%; border-collapse: collapse; }
.tabla-falsa th {
  text-align: left; padding: 3px 6px; color: #fff;
  background: linear-gradient(to bottom, #5fb3ef, #1a7fd1);
}
.tabla-falsa td { padding: 3px 6px; border-bottom: 1px solid #e3e9ee; }
.tabla-falsa tr:nth-child(odd) td { background: #f2f8fd; }

/* Reflejo debajo de la captura */
.reflejo-captura {
  height: 40px;
  margin: 2px 10px 0;
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at top, rgba(0, 40, 80, 0.22), transparent 70%);
}

/* ==========================================================
   CARACTERÍSTICAS
   ========================================================== */
.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.caracteristica { text-align: center; transition: transform 0.15s; }
.caracteristica:hover { transform: translateY(-4px); border-color: #ffb347; }
.caracteristica img { margin-bottom: 10px; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25)); }
.caracteristica h3 { font-size: 15px; color: #1a6fb8; margin-bottom: 8px; line-height: 1.25; }
.caracteristica p { font-size: 12px; color: #555; }

/* ==========================================================
   CONSULTA EXTERNA
   ========================================================== */
.pasos-consulta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.paso {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #cfe2c4;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
}
.paso img { flex-shrink: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.paso h4 { font-size: 15px; color: #2f5f1f; margin-bottom: 3px; }
.paso p  { font-size: 12px; color: #555; }
.numero {
  display: inline-block;
  width: 22px; height: 22px;
  line-height: 22px;
  margin-right: 4px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffc15e 0%, #ff9200 50%, #ef7d00 51%, #ff9a10 100%);
  border: 1px solid #b35a00;
  vertical-align: 1px;
}

/* ==========================================================
   CERTIFICADOS
   ========================================================== */
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.tarjeta-certificado {
  border-radius: 12px;
  border: 2px dashed;
  padding: 0 0 16px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tarjeta-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tarjeta-cabeza h3 { font-size: 16px; line-height: 1.2; }
.tarjeta-certificado > p { padding: 0 16px; font-size: 12px; color: #555; flex: 1; }
.tarjeta-certificado .nota-imprimir {
  flex: 0;
  margin: 14px 16px 0;
  padding: 6px 10px;
  font-weight: bold;
  font-size: 12px;
  color: #2f5f1f;
  background: #fffbd0;
  border: 1px solid #f0d860;
  border-radius: 6px;
}
.nota-imprimir img { margin-right: 4px; }

.tarjeta-certificado.verde   { border-color: #8fd36a; }
.tarjeta-certificado.verde .tarjeta-cabeza   { background: linear-gradient(to bottom, #f1fbe9, #d9f2c8); }
.tarjeta-certificado.verde h3   { color: #2f8a0c; }
.tarjeta-certificado.azul    { border-color: #7fbfef; }
.tarjeta-certificado.azul .tarjeta-cabeza    { background: linear-gradient(to bottom, #eef7ff, #cfe7fa); }
.tarjeta-certificado.azul h3    { color: #1a6fb8; }
.tarjeta-certificado.naranja { border-color: #f6b768; }
.tarjeta-certificado.naranja .tarjeta-cabeza { background: linear-gradient(to bottom, #fff6e8, #ffe2bb); }
.tarjeta-certificado.naranja h3 { color: #c86400; }

/* ==========================================================
   PRECIO
   ========================================================== */
.caja-precio {
  position: relative;
  width: 480px;
  margin: 10px auto 0;
  padding: 30px 40px 26px;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff 0%, #f3fbec 100%);
  border: 3px dashed #74d61f;
  border-radius: 18px;
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px #cde5bf, 0 8px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.liston {
  position: absolute;
  top: 18px;
  right: -40px;
  width: 160px;
  padding: 4px 0;
  transform: rotate(45deg);
  font-weight: bold;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
  background: linear-gradient(to bottom, #ff7a7a 0%, #e12b2b 50%, #c41414 51%, #d92020 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.caja-precio h3 { font-size: 26px; color: #2f8a0c; }
.monto { font-size: 16px; color: #666; margin: 4px 0 18px; }
.cifra {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 56px;
  font-weight: bold;
  color: #e86b00;
  text-shadow: 1px 1px 0 #fff, 3px 3px 4px rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}
.moneda { font-weight: bold; color: #e86b00; }
.caja-precio .lista-palomitas {
  display: inline-block;
  text-align: left;
  margin-bottom: 22px;
  font-size: 13px;
}
.letra-chica { margin-top: 10px; font-size: 10px; color: #999; }

/* ==========================================================
   CONTACTO
   ========================================================== */
.contacto-columnas { display: flex; gap: 25px; align-items: flex-start; }
.contacto-info { flex: 0 0 280px; text-align: center; }
.contacto-info h3 { font-size: 20px; color: #c41414; margin: 8px 0; }
.contacto-info p { font-size: 12px; margin-bottom: 10px; text-align: left; }

.formulario {
  flex: 1;
  padding: 20px 24px;
  background: linear-gradient(to bottom, #f7fbff 0%, #e8f3fc 100%);
  border: 1px solid #b9d6ee;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, 0.08);
}
.campo { margin-bottom: 12px; flex: 1; }
.campo-doble { display: flex; gap: 14px; }
.campo label { display: block; font-weight: bold; font-size: 12px; color: #2a4f6e; margin-bottom: 3px; }
.req { color: #d61b1b; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 6px 8px;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  color: #333;
  background: linear-gradient(to bottom, #f2f2f2 0%, #ffffff 30%);
  border: 1px solid #9fb6c8;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
.campo textarea { resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: #5cc61a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 6px rgba(92, 198, 26, 0.6);
}
.campo .error { border-color: #d61b1b; background: #fff3f3; }

.mensaje-formulario { min-height: 18px; margin-bottom: 8px; font-size: 12px; font-weight: bold; }
.mensaje-formulario.ok    { color: #2f8a0c; }
.mensaje-formulario.falla { color: #c41414; }

/* ==========================================================
   PIE DE PÁGINA
   ========================================================== */
#pie {
  padding: 22px 30px 26px;
  text-align: center;
  font-size: 11px;
  color: #dff3d4;
  background: linear-gradient(to bottom, #3aa312 0%, #2a7f0a 100%);
  border-top: 4px solid #74d61f;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
#pie a { color: #fff; }
#pie a:hover { color: #ffe42b; }
#pie p { margin-top: 4px; }
.pie-menu { margin-bottom: 6px; font-size: 12px; }
.mejor-visto { font-style: italic; color: #c3e6b0; }

.redes { margin-bottom: 12px; }
.boton-red {
  display: inline-block;
  margin: 0 4px;
  padding: 3px 10px 3px 4px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.3);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.boton-red span {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 5px;
  line-height: 16px;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
}
.boton-red.facebook { background: linear-gradient(to bottom, #6d8fd0 0%, #3b5998 100%); border-color: #29487d; }
.boton-red.twitter  { background: linear-gradient(to bottom, #7fdcff 0%, #2fa9e0 100%); border-color: #1d84b5; }
.boton-red:hover { filter: brightness(1.1); }

/* ==========================================================
   PANTALLAS PEQUEÑAS (para que no se rompa en celular)
   ========================================================== */
@media (max-width: 1000px) {
  body { padding: 0; }
  #contenedor { width: auto; margin: 0; border-radius: 0; }
  #encabezado { height: auto; padding: 16px 16px 60px; }
  .estrella-nuevo { left: auto; right: 16px; top: 8px; width: 80px; height: 80px; }
  .encabezado-derecha { position: static; text-align: left; margin-top: 30px; }
  #menu { flex-wrap: wrap; padding: 0 16px; margin-top: -30px; }
  .hero, .contacto-columnas { flex-direction: column; }
  .hero, .seccion { padding-left: 16px; padding-right: 16px; }
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla-3, .pasos-consulta { grid-template-columns: 1fr; }
  .caja-precio { width: auto; padding: 26px 20px; }
  .contacto-info { flex-basis: auto; width: 100%; }
  .ventana { transform: none; }
}
@media (max-width: 600px) {
  .logo-nombre { font-size: 34px; }
  .hero h1 { font-size: 26px; }
  .rejilla-4 { grid-template-columns: 1fr; }
  .campo-doble { flex-direction: column; gap: 0; }
  #menu li a { padding: 7px 12px 5px; font-size: 12px; }
  .boton-grande { font-size: 18px; padding: 12px 28px; }
}