/* ==========================================================================
   Cotización de cristales con receta.
   ========================================================================== */

.zfc-cotiza__cabecera { max-width: 720px; margin-bottom: var(--zfc-esp-8); }
.zfc-cotiza__cabecera h1 { margin: 0 0 var(--zfc-esp-3); }
.zfc-cotiza__cabecera p { margin: 0; color: var(--zfc-texto-secundario); }
.zfc-cotiza__cabecera strong { color: var(--zfc-texto-marca); }

.zfc-cotiza {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .zfc-cotiza { grid-template-columns: 1fr 320px; gap: var(--zfc-esp-12); }
}

.zfc-cotiza__formulario { min-width: 0; }

/* --- Guía de pasos -------------------------------------------------------- */

.zfc-pasos-guia {
  display: flex;
  gap: var(--zfc-esp-4);
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--zfc-esp-8);
  padding: 0 0 var(--zfc-esp-4);
  border-bottom: 1px solid var(--zfc-borde-medio);
}

.zfc-pasos-guia__item {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-pasos-guia__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--zfc-borde-medio);
  border-radius: var(--zfc-radio-redondo);
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
}

.zfc-pasos-guia__item--activo { color: var(--zfc-texto-marca); font-weight: 600; }

.zfc-pasos-guia__item--activo span {
  background: var(--zfc-accion-primaria);
  border-color: var(--zfc-accion-primaria);
  color: var(--zfc-texto-inverso);
}

.zfc-pasos-guia__item--hecho span {
  background: var(--zfc-accion-acento);
  border-color: var(--zfc-accion-acento);
  color: var(--zfc-texto-marca);
}

/* --- Pasos ---------------------------------------------------------------- */

.zfc-cotiza__paso[hidden] { display: none; }
.zfc-cotiza__paso h2 { margin: 0 0 var(--zfc-esp-2); font-size: var(--zfc-h3); }
.zfc-cotiza__ayuda { margin: 0 0 var(--zfc-esp-6); color: var(--zfc-texto-secundario); }

.zfc-cotiza__nota,
.zfc-cotiza__contador {
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-cotiza__nota { margin: var(--zfc-esp-4) 0 0; }

.zfc-cotiza__acciones {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-3);
  flex-wrap: wrap;
  margin-top: var(--zfc-esp-6);
}

.zfc-cotiza__aviso {
  margin: var(--zfc-esp-6) 0 0;
  padding: var(--zfc-esp-4);
  background: var(--zfc-aviso-fondo);
  border-left: 3px solid var(--zfc-accion-acento);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-cotiza__aviso strong { display: block; color: var(--zfc-texto-marca); }

/* --- Zona de subida ------------------------------------------------------- */

.zfc-suelta { position: relative; }

/* El input se esconde sin sacarlo del foco del teclado: la etiqueta es la que
   se ve, y sigue siendo la que activa el selector de archivos. */
.zfc-suelta input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.zfc-suelta__zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-12) var(--zfc-esp-4);
  border: 2px dashed var(--zfc-borde-medio);
  background: var(--zfc-superficie-bloque);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.zfc-suelta__zona:hover,
.zfc-suelta--encima .zfc-suelta__zona {
  border-color: var(--zfc-accion-acento);
  background: var(--zfc-aviso-fondo);
}

.zfc-suelta input[type="file"]:focus-visible + .zfc-suelta__zona {
  outline: 2px solid var(--zfc-foco);
  outline-offset: 2px;
}

.zfc-suelta__zona .zfc-icono { color: var(--zfc-acento-texto); }
.zfc-suelta__titulo { font-size: var(--zfc-cuerpo-m); font-weight: 600; color: var(--zfc-texto-marca); }
.zfc-suelta__formatos { font-size: var(--zfc-cuerpo-s); color: var(--zfc-texto-secundario); }

.zfc-suelta__elegido {
  display: flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  margin: var(--zfc-esp-3) 0 0;
  padding: var(--zfc-esp-3);
  background: var(--zfc-exito-fondo);
  border-left: 3px solid var(--zfc-exito);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-principal);
}

.zfc-suelta__elegido::before { content: "✓"; color: var(--zfc-exito); font-weight: 600; }

/* `display: flex` gana sobre el `hidden` del HTML: hay que devolvérselo. */
.zfc-suelta__elegido[hidden] { display: none; }

/* La foto pesa más de lo que el servidor recibe. Va junto al campo y no arriba
   del formulario porque el problema es de ese archivo, y se avisa al elegirlo:
   antes se enteraba al enviar, con los tres pasos ya llenos. */
.zfc-suelta__error {
  margin: var(--zfc-esp-2) 0 0;
  padding: var(--zfc-esp-3);
  background: var(--zfc-error-fondo);
  border-left: 3px solid var(--zfc-error);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-principal);
}

.zfc-suelta__error[hidden] { display: none; }

/* --- Campos --------------------------------------------------------------- */

.zfc-campo { margin-bottom: var(--zfc-esp-4); }

.zfc-campo label,
.zfc-campo legend {
  display: block;
  margin-bottom: var(--zfc-esp-2);
  /* 14px y en caja normal, no 12 en mayusculas.
     Era un letrerito gris del tamano de la letra chica de un contrato, con las
     letras separadas, justo encima del campo donde se deja el telefono para que
     te llamen. Con presbicia hay que acercarse a leer que va en cada uno.
     Las mayusculas ademas se leen mas lento: no hay perfil de palabra. */
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  color: var(--zfc-texto-marca);
}

.zfc-campo__opcional { text-transform: none; letter-spacing: 0; font-weight: 400; }

.zfc-campo input[type="text"],
.zfc-campo input[type="tel"],
.zfc-campo input[type="email"],
.zfc-campo textarea {
  width: 100%;
  height: var(--zfc-campo-alto);
  padding: 0 var(--zfc-esp-3);
  border: 1px solid var(--zfc-borde-campo);
  border-radius: var(--zfc-radio);
  background: #FFFFFF;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  color: var(--zfc-texto-principal);
}

.zfc-campo textarea { height: auto; min-height: 88px; padding: var(--zfc-esp-3); }

.zfc-campo--opciones { border: 0; padding: 0; margin-bottom: var(--zfc-esp-4); }

.zfc-opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--zfc-esp-2);
  min-height: var(--zfc-alto-tactil);
  margin-right: var(--zfc-esp-6);
  font-size: var(--zfc-cuerpo-m);
  color: var(--zfc-texto-principal);
  cursor: pointer;
}

.zfc-opcion--consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--zfc-esp-3);
  margin: var(--zfc-esp-2) 0 0;
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-opcion--consentimiento input { margin-top: 3px; }

/* --- Repaso final --------------------------------------------------------- */

.zfc-repaso { list-style: none; margin: 0; padding: 0; }

.zfc-repaso__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--zfc-esp-1) var(--zfc-esp-4);
  padding: var(--zfc-esp-3) 0;
  border-bottom: 1px solid var(--zfc-borde-sutil);
  align-items: center;
}

.zfc-repaso__item .zfc-etiqueta { grid-column: 1 / -1; margin: 0; }

.zfc-repaso__item > span:not(.zfc-etiqueta) { color: var(--zfc-texto-principal); }

.zfc-repaso__item a,
.zfc-repaso__item button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--zfc-acento-texto);
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-s);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Barra lateral -------------------------------------------------------- */

.zfc-cotiza__lado { display: flex; flex-direction: column; gap: var(--zfc-esp-4); }

.zfc-cotiza__marco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-bloque);
  border: 1px solid var(--zfc-borde-sutil);
}

.zfc-cotiza__marco img {
  width: 100%;
  height: auto;
  margin-block: var(--zfc-esp-2);
  background: #FFFFFF;
}

.zfc-cotiza__marca {
  font-size: var(--zfc-etiqueta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zfc-texto-secundario);
}

.zfc-cotiza__nombre { font-size: var(--zfc-cuerpo-m); font-weight: 500; color: var(--zfc-texto-marca); }
.zfc-cotiza__precio { font-size: var(--zfc-cuerpo-s); color: var(--zfc-texto-secundario); }
.zfc-cotiza__marco--vacio p { margin: 0; color: var(--zfc-texto-secundario); }

.zfc-cotiza__despues {
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-bloque);
  border-left: 3px solid var(--zfc-accion-acento);
}

.zfc-cotiza__despues-titulo { margin: 0 0 var(--zfc-esp-3); font-size: var(--zfc-h6); }

.zfc-cotiza__despues ul {
  margin: 0;
  padding-left: var(--zfc-esp-4);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
}

.zfc-cotiza__despues li { margin-bottom: var(--zfc-esp-2); }

.zfc-cotiza__whatsapp {
  display: flex;
  align-items: flex-start;
  gap: var(--zfc-esp-3);
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-bloque);
  border: 1px solid var(--zfc-borde-sutil);
  font-size: var(--zfc-cuerpo-s);
  color: var(--zfc-texto-secundario);
  text-decoration: none;
}

.zfc-cotiza__whatsapp:hover { border-color: var(--zfc-accion-primaria); color: var(--zfc-texto-secundario); }
.zfc-cotiza__whatsapp .zfc-icono { flex: none; color: var(--zfc-acento-texto); }
.zfc-cotiza__whatsapp strong { display: block; color: var(--zfc-texto-marca); }

/* --- Solicitud enviada ---------------------------------------------------- */

.zfc-cotiza-listo { max-width: 640px; padding-block: var(--zfc-esp-8); }
.zfc-cotiza-listo h1 { margin: 0 0 var(--zfc-esp-3); }
.zfc-cotiza-listo p { color: var(--zfc-texto-secundario); }
.zfc-cotiza-listo .zfc-gracias__pedido { margin: var(--zfc-esp-4) 0; }
.zfc-cotiza-listo__nota { font-size: var(--zfc-cuerpo-s); }

/* ==========================================================================
   Contacto y venta mayorista
   ========================================================================== */

.zfc-formulario { max-width: 560px; }

.zfc-campo select {
  width: 100%;
  height: var(--zfc-campo-alto);
  padding: 0 var(--zfc-esp-3);
  border: 1px solid var(--zfc-borde-campo);
  border-radius: var(--zfc-radio);
  background: #FFFFFF;
  font-family: var(--zfc-fuente-ui);
  font-size: var(--zfc-cuerpo-m);
  color: var(--zfc-texto-principal);
}

.zfc-contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zfc-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .zfc-contacto { grid-template-columns: 340px 1fr; gap: var(--zfc-esp-12); }
}

.zfc-contacto__datos { display: flex; flex-direction: column; gap: var(--zfc-esp-4); }

/* WhatsApp primero y con el número completo: es el canal que la óptica
   contesta de verdad. */
.zfc-contacto__whatsapp {
  display: flex;
  flex-direction: column;
  gap: var(--zfc-esp-2);
  padding: var(--zfc-esp-6);
  background: var(--zfc-superficie-bloque);
  border-left: 3px solid var(--zfc-accion-acento);
  text-decoration: none;
}

.zfc-contacto__whatsapp:hover { background: var(--zfc-aviso-fondo); }
.zfc-contacto__whatsapp .zfc-icono { color: var(--zfc-acento-texto); }
.zfc-contacto__whatsapp strong { font-size: var(--zfc-h4); color: var(--zfc-texto-marca); }
.zfc-contacto__whatsapp .zfc-cuerpo-s { color: var(--zfc-texto-secundario); }

.zfc-contacto__bloque {
  padding: var(--zfc-esp-4);
  background: var(--zfc-superficie-bloque);
  border: 1px solid var(--zfc-borde-sutil);
}

.zfc-contacto__bloque p { margin: var(--zfc-esp-2) 0 0; color: var(--zfc-texto-secundario); }
.zfc-contacto__formulario h2 { margin: 0 0 var(--zfc-esp-2); }

.zfc-mayorista__ventajas { margin-bottom: var(--zfc-esp-12); }
.zfc-mayorista__como { margin-bottom: var(--zfc-esp-12); }
.zfc-mayorista__como h2,
.zfc-mayorista__formulario h2 { margin: 0 0 var(--zfc-esp-6); }
.zfc-mayorista__formulario h2 { margin-bottom: var(--zfc-esp-2); }

/* --- Para qué los vas a usar ---------------------------------------------- */

/* Se pregunta por el uso y no por el tipo de cristal: el sistema de diseño pide
   que «monofocal», «progresivo» e «índice» no aparezcan en este flujo. */
.zfc-uso {
  margin: var(--zfc-esp-6) 0 0;
  padding: 0;
  border: 0;
}

.zfc-uso__titulo {
  padding: 0;
  margin-bottom: var(--zfc-esp-1);
  font-family: var(--zfc-fuente-titulos);
  font-weight: var(--zfc-titulos-peso);
  font-size: var(--zfc-h4);
  line-height: var(--zfc-h4-alto);
  color: var(--zfc-texto-marca);
}

.zfc-uso__opciones {
  display: grid;
  gap: var(--zfc-esp-2);
  margin-top: var(--zfc-esp-3);
}

.zfc-uso__opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--zfc-esp-3);
  padding: var(--zfc-esp-3) var(--zfc-esp-4);
  border: 1px solid var(--zfc-borde-medio);
  background: var(--zfc-superficie-base);
  cursor: pointer;
  min-height: var(--zfc-alto-tactil);
}

.zfc-uso__opcion:hover { border-color: var(--zfc-accion-primaria); }

/* El radio no se esconde: es el control real y tiene que verse marcado. */
.zfc-uso__opcion input { margin-top: 3px; flex: none; }

.zfc-uso__opcion:has(input:checked) {
  border-color: var(--zfc-accion-primaria);
  box-shadow: inset 0 0 0 1px var(--zfc-accion-primaria);
}

.zfc-uso__opcion:has(input:focus-visible) {
  outline: 2px solid var(--zfc-foco);
  outline-offset: 2px;
}

.zfc-uso__cuerpo { display: flex; flex-direction: column; gap: 2px; }

.zfc-uso__nombre {
  font-weight: 600;
  color: var(--zfc-texto-principal);
}

.zfc-uso__ayuda {
  font-size: var(--zfc-cuerpo-s);
  line-height: var(--zfc-cuerpo-s-alto);
  color: var(--zfc-texto-secundario);
}

/* El aviso de la tienda. En ámbar y no en rojo: no es un error, es una
   recomendación, y quien quiera seguir online sigue. */
.zfc-uso__aviso {
  margin-top: var(--zfc-esp-3);
  padding: var(--zfc-esp-4);
  background: var(--zfc-aviso-fondo);
  border-left: 3px solid var(--zfc-accion-acento);
}

.zfc-uso__aviso p { margin: 0 0 var(--zfc-esp-3); font-size: var(--zfc-cuerpo-s); line-height: var(--zfc-cuerpo-s-alto); }

.zfc-uso__aviso-titulo {
  font-family: var(--zfc-fuente-titulos);
  font-weight: var(--zfc-titulos-peso);
  font-size: var(--zfc-h5);
  line-height: var(--zfc-h5-alto);
  color: var(--zfc-texto-marca);
}